Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
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-dropzoneDemo
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>,
};acceptsvalue: 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
$ yarn install --pure-lockfile
$ yarn startTest
$ yarn run format
$ yarn run eslint
$ yarn run flow
$ yarn run test:watch
$ yarn run buildPublish
$ npm version patch
$ npm run changelog
git commit & pushCONTRIBUTING
- ⇄ 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.
