useDropZone

Simple custom react hook that handles the logic to drop a file over a defined drop zone

Install

npm install use-drop-zone --save

How to use

You only need to provide an onDrop function which will be called with the files that were dropped over the drop zone. If no files are detected your function will be called with null.

The custom hook returns two things, a boolean flag which indicates if an item is over the drop zone, as well as all the event handlers needed to make your drop zone work properly, you must attach the handlers on an item for the hook to work properly.

Example

function Component() {
  function onDrop(files) {
    // Do whatever you need with files!
    console.log(files)
  }

  const [isOver, handlers] = useDropZone(onDrop)

  return (
    <div {...handlers}>
      <p>A</p>
      <p>B</p>
      <p>C</p>
    </div>
  )
}

Gotchas

This custom hook takes care of the dragLeave event firing on child elements of your dropzone (see this fore more info), if you are looking for different behavior feel free to fork this repository and implement your own custom behavior.