Notary Public Mystifier

    react-drop-zone

    4.3.2 • 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 both Restricts downloads to an extension type. ---
    multiple both 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

    894

    Version

    4.3.2

    License

    MIT

    Unpacked Size

    43.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • romgrk