1. Here element is a ref, it should be attached to the element where the file will be dropped.
2. dragging is a boolean state | it is {true} while file is being dragged
3. onFile is a callback | (files:Array<File>)=>void | it will be triggered when even files are dropped on the attached element.
importuseFileDropfrom'easy-file-drop';import{useCallback,useState}from'react';functionApp(){const[files,setFiles]=useState([])constonFiles=useCallback(async(files)=>{/** Do somethinng with the files here */setFiles(files)},[])const{ element, dragging }=useFileDrop(onFiles)return(<divclassName="App"ref={element}><headerclassName="App-header"><ul>{files.map(file=><likey={file.name}>{file.name}</li>)}</ul>{dragging?'Drop this file here':'Drag a file'}</header></div>);}exportdefaultApp;