https://github.com/mfix22/dropperx
📁✊ File drop target for React DND
https://github.com/mfix22/dropperx
drag-and-drop filereader files function-as-child react react-dnd
Last synced: 4 months ago
JSON representation
📁✊ File drop target for React DND
- Host: GitHub
- URL: https://github.com/mfix22/dropperx
- Owner: mfix22
- License: mit
- Created: 2017-09-24T20:08:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-22T21:22:04.000Z (about 4 years ago)
- Last Synced: 2025-02-01T07:23:06.778Z (4 months ago)
- Topics: drag-and-drop, filereader, files, function-as-child, react, react-dnd
- Language: JavaScript
- Homepage:
- Size: 129 KB
- Stars: 16
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `` 📁✊
Wrap any function-as-child component to turn it into a Drop zone that reads the contents of files. A _prescribed_ method for reading files in the browser.
#### Usage:
```javascript
import Dropperx from 'dropperx'
// inside component tree
this.setState({ files })}
accept="image/png"
maxSize={10000}
>
{({ canDrop, files, history }) => (
file.content)} />
{history.map(bundle => (
))}
)}
```
## Props
- `onDrop(files)`: Callback called with an array of files dropped. Get the contents of the file from `files[0].content`
- `filter`: Function passed to `files.filter(filter)`. Lets you control which files are read.
- `accept`: List of comma separated MIME types
- `minSize`: Minimum file size
- `maxSize`: Maximum file size
## Child Callback Function
The function you pass into `Dropperx` is called with a single object containing these keys:
- `isOver`: Boolean that says whether cursor is over the target
- `canDrop`: Boolean that states if able to drop on the window. This is true if the cursor is holding files
- `files`: Array of files that were last dropped. `null` if nothing has been dropped.
- `history`: Array of past dropped contents. `history[0]` contains the array of files last dropped.
## License
MIT