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

    Install

    npm i react-dnd-dropzone

    DownloadsWeekly Downloads

    45

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    29.8 kB

    Total Files

    23

    Last publish

    Collaborators

    • evenchange4