Simple, elegant & efficient drop-zone component

DropZone

This is a simple but customizeable component. You can choose between a
pre-styled version, or a bare component that allows you to specify a render
function.

Both versions will trigger an .onDrop(file: HTML5 File, text: String), so you
get both the file handle and its text content in a single event (file reading
can be disabled).

Install

npm i -S react-drop-zone

Pre-Styled version

StyledDropZone Demo

import { StyledDropZone } from 'react-drop-zone'
import 'react-drop-zone/dist/styles.css'

<StyledDropZone onDrop={(file, text) => console.log(file, text)} />

Bare version

DropZone Demo

import DropZone from 'react-drop-zone'

<DropZone onDrop={(file, text) => console.log(file)}>
{
  ({ over, overDocument }) =>
    <div>
      {
        over ?
          'file is over element' :
        overDocument ?
          'file is over document' :
          'no file'
      }
    </div>
}
</DropZone>

Props

Name	Description	Default
onDrop (required)	called when a file is dropped or selected. Signature: (file: HTML5File, text: String)
handleClick	Handle click events on the rendered component	true
dontRead	Prevent reading the file content, if it's causing problems	false
label	[StyledDropZone only] Label on the component	Select or Drop your file here
children	[DropZone only] Render function that receives ({ over: Boolean, overDocument: Boolean})	false

GitHub