use-file-drop
v0.1.1
Published
A simple, zero dependancy hook for implementing drag and drop
Downloads
17
Maintainers
Readme
use-file-drop
A simple, zero dependancy hook for implementing drag and drop in react.
Installation
npm install use-file-drop
Example
import React from "react";
import { useFileDrop } from "use-file-drop";
export default App() {
const [fileName, setFileName] = useState("");
const onDrop = (files) => {
setFileName(files[0].name);
}
const [canDrop, dropRef] = useFileDrop({
drop: onDrop
});
return (
<div ref={dropRef} className={canDrop ? "drag-over": ""}>
<div>{fileName}</div>
</div>
)
}
It is better to wrap your the DropFunction
in a useCallback
. This will slightly improve performance in the case above since the React's Dispatch
function (setFileName) is guaranteed to not change reference.
const onDrop = useCallback((files) => {
setFileName(files[0].name);
}, []);