https://github.com/sbaidon/useDropZone

Custom react hook that handles drop file logic
https://github.com/sbaidon/useDropZone

hooks react

Last synced: about 1 month ago
JSON representation

Custom react hook that handles drop file logic

• Host: GitHub
• URL: https://github.com/sbaidon/useDropZone
• Owner: sbaidon
• License: mit
• Created: 2020-06-14T18:27:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T17:10:33.000Z (over 1 year ago)
• Last Synced: 2024-07-31T07:15:52.337Z (4 months ago)
• Topics: hooks, react
• Language: TypeScript
• Homepage:
• Size: 2.63 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: code-of-conduct.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `useDropZone`
• awesome-react-hooks-cn - `useDropZone`
• awesome-react-hooks - `useDropZone`
• awesome-react-hooks - `useDropZone`

README

        
# useDropZone

[![Build Status](https://travis-ci.org/sbaidon/useDropZone.svg?branch=master)](https://travis-ci.org/sbaidon/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

```javascript

function Component() {

  function onDrop(files) {

    // Do whatever you need with files!

    console.log(files)

  }

  const [isOver, handlers] = useDropZone(onDrop)

  return (

    


      
A

      
B

      
C

    

  )

}

```


# Gotchas

This custom hook takes care of the `dragLeave` event firing on child elements of your dropzone (see [this](https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element) fore more info), if you are looking for different behavior feel free to fork this repository and implement your own custom behavior.