smallfx/react-dnd-dropzone

Dropzone with render props built with react-dnd.

react-dnd-dropzone

Dropzone with render props built with react-dnd.
This is a simple component for the use case of native files.

Installation

$ yarn add react-dnd-dropzone

Demo

• https://react-dnd-dropzone.netlify.com/

Usage

import Dropzone from 'react-dnd-dropzone';

<Dropzone
  onDrop={files => console.log(files)}
  render={({ canDrop, isOver }) => (
    <div>
      Drop file here!
      <pre>{JSON.stringify({ canDrop, isOver })}</pre>
    </div>
  )}
/>;

API

type Props = {
  onDrop: (files: Array<File>, monitor: any) => void,
  render: ({ canDrop: boolean, isOver: boolean }) => React.Element<any>,
  accepts?: Array<string>,
};

• accepts value: https://github.com/react-dnd/react-dnd/blob/master/packages/react-dnd-html5-backend/src/NativeTypes.js

Development

Requirements

• node >= 11.5.0
• yarn >= 1.12.3

$ yarn install --pure-lockfile
$ yarn start

Test

$ yarn run format
$ yarn run eslint
$ yarn run flow
$ yarn run test:watch
$ yarn run build

Publish

$ 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

LICENSE

MIT: http://michaelhsu.mit-license.org