react-dnd-dropzone
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

react-dnd-dropzone

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

Travis Codecov Status npm package npm downloads

prettier license

Installation

$ yarn add react-dnd-dropzone

Demo

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>
  )}
/>;

With custom React-dnd context (PR #56 by @smallfx).

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 }) => (
  <div>{children}</div>
));
const Dropzone = DropTarget(Target);
 
const App = () => (
  <HTML5DropContext>
    <Dropzone
      onDrop={files => console.log(files)}
      render={({ canDrop, isOver }) => (
        <div>
          <pre>{JSON.stringify({ canDrop, isOver }, null, 2)}</pre>
        </div>
      )}
    />
  </HTML5DropContext>
);

API

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

Development

Requirements

  • node >= 11.9.0
  • yarn >= 1.13.0
$ 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

Package Sidebar

Install

npm i react-dnd-dropzone

Weekly Downloads

58

Version

1.1.4

License

MIT

Unpacked Size

29.8 kB

Total Files

23

Last publish

Collaborators

  • evenchange4