https://github.com/evenchange4/react-dnd-dropzone
Dropzone with render props built with react-dnd.
https://github.com/evenchange4/react-dnd-dropzone
dropzone react react-dnd render-props
Last synced: 11 months ago
JSON representation
Dropzone with render props built with react-dnd.
- Host: GitHub
- URL: https://github.com/evenchange4/react-dnd-dropzone
- Owner: evenchange4
- License: mit
- Created: 2018-01-28T08:21:38.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-03-13T04:59:50.000Z (11 months ago)
- Last Synced: 2025-03-13T05:30:08.152Z (11 months ago)
- Topics: dropzone, react, react-dnd, render-props
- Language: JavaScript
- Homepage: https://react-dnd-dropzone.netlify.com/
- Size: 608 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dnd-dropzone
> Dropzone with render props built with react-dnd.
> This is a simple component for the use case of [native files](http://react-dnd.github.io/react-dnd/examples/other/native-files).
[![Travis][build-badge]][build]
[![Codecov Status][codecov-badge]][codecov]
[![npm package][npm-badge]][npm]
[![npm downloads][npm-downloads]][npm]
[![prettier][prettier-badge]][prettier]
[![license][license-badge]][license]
## Installation
```sh
$ yarn add react-dnd-dropzone
```
## Demo
- https://react-dnd-dropzone.netlify.com/
## Usage
```js
import Dropzone from 'react-dnd-dropzone';
console.log(files)}
render={({ canDrop, isOver }) => (
Drop file here!
{JSON.stringify({ canDrop, isOver })}
)}
/>;
```
### With custom React-dnd context (PR [#56](https://github.com/evenchange4/react-dnd-dropzone/pull/56) by [@smallfx](https://github.com/smallfx)).
```js
import * as React from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { DropTarget, Target } from 'react-dnd-dropzone';
const HTML5DropContext = DragDropContext(HTML5Backend)(({ children }) => (
{children}
));
const Dropzone = DropTarget(Target);
const App = () => (
console.log(files)}
render={({ canDrop, isOver }) => (
{JSON.stringify({ canDrop, isOver }, null, 2)}
)}
/>
);
```
## API
```js
type DropzoneProps = {
onDrop: (files: Array, monitor: any) => void,
render: ({ canDrop: boolean, isOver: boolean }) => React.Element,
accepts?: Array,
};
```
- `accepts` value: https://github.com/react-dnd/react-dnd/blob/master/packages/react-dnd-html5-backend/src/NativeTypes.js
## Development
### Requirements
- node >= 11.9.0
- yarn >= 1.13.0
```sh
$ yarn install --pure-lockfile
$ yarn start
```
## Test
```sh
$ yarn run format
$ yarn run eslint
$ yarn run flow
$ yarn run test:watch
$ yarn run build
```
## Publish
```bash
$ npm version patch
$ npm run changelog
git commit & push
```
---
## CONTRIBUTING
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests.
## [CHANGELOG](CHANGELOG.md)
## [LICENSE](LICENSE)
MIT: [http://michaelhsu.mit-license.org](http://michaelhsu.mit-license.org)
[build-badge]: https://img.shields.io/travis/evenchange4/react-dnd-dropzone/master.svg?style=flat-square
[build]: https://travis-ci.org/evenchange4/react-dnd-dropzone
[npm-badge]: https://img.shields.io/npm/v/react-dnd-dropzone.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-dnd-dropzone
[codecov-badge]: https://img.shields.io/codecov/c/github/evenchange4/react-dnd-dropzone.svg?style=flat-square
[codecov]: https://codecov.io/github/evenchange4/react-dnd-dropzone?branch=master
[npm-downloads]: https://img.shields.io/npm/dt/react-dnd-dropzone.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/react-dnd-dropzone.svg?style=flat-square
[license]: http://michaelhsu.mit-license.org/
[prettier-badge]: https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square
[prettier]: https://github.com/prettier/prettier