Miss any of our Open RFC calls?Watch the recordings here! »

react-drop-zone

4.1.1 • Public • Published

react-drop-zone

Simple and easily usable

This package offers a styled version of the component or a render-function version which allows you to control rendering. Both versions trigger an .onDrop(file: HTML5 File, content: String) (file reading can be disabled).

Styled version (open demo)

StyledDropZone

import { StyledDropZone } from 'react-drop-zone'
import 'react-drop-zone/dist/styles.css'
 
<StyledDropZone onDrop={(file, text) => console.log(file, text)} />

Bare version (open 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 Component Description Default
accept DropZone Restricts downloads to an extension type. ---
multiple DropZone Allows multiple files to be selected. (disables file reading!) ---
onDrop (required) both called when a file is dropped or selected. Signature: (file: HTML5File, text: String)
handleClick both Handle click events on the rendered component true
dontRead both Prevents reading the file content, if it's causing problems false
children DropZone Render function that receives ({ over: Boolean, overDocument: Boolean}) false
children StyledDropZone Label on the component Click or drop your file here

Additional API

The function readFileAsText is exported if you need to read a file's text content:

import { StyledDropZone, readFileAsText } from 'react-drop-zone'
import 'react-drop-zone/dist/styles.css'
 
<StyledDropZone
  dontRead
  onDrop={(file) =>
    !file.name.endsWith('.txt') ?
      'Not a text file' :
      readFileAsText(file)
        .then(text => console.log(file, text))
  }
/>

Details

The component overwrites the onDrag/DragEnter/.../Drop props of the render function child.

The accept attribute

If you need more information, see here: (open developer)

The device allows, for example, accept = ".pdf, image/*"

Install

npm i react-drop-zone

DownloadsWeekly Downloads

1,185

Version

4.1.1

License

MIT

Unpacked Size

38.3 kB

Total Files

21

Last publish

Collaborators

  • avatar