Skip to content
Get packs

react-dropzone

A React hook for building drag-and-drop file upload zones in web pages.

GitHub Download v20.1.4
Stars
11k
Forks
804
Licence
MIT
Language
TypeScript
Last update
6 days ago
Type
Library

What it is

react-dropzone is a small React library that lets a web page accept files dragged in from the computer, or chosen through a normal file picker when the area is clicked. It provides a hook (useDropzone) and a wrapper component that supply the props needed to turn any element into a drop area. It is installed from npm and ships with TypeScript types.

  • Let users drag image files onto a form field and get the File objects in an onDrop callback
  • Restrict accepted files and show a highlighted state while a drag is over the zone
  • Read dropped file contents in the browser using the FileReader API
  • Open the file dialog programmatically through a ref on the Dropzone component

Great for

  • React developers adding file upload to a web app
  • Projects that need a drop area with a click-to-select fallback
  • Teams that want control over how the drop area looks, since it supplies behavior rather than styling
  • TypeScript users who want bundled type definitions

Not ideal for

  • People who are not building with React, since the library is written for React components and hooks
  • Projects needing a finished upload widget with progress bars and resumable uploads, since the README describes only the drop zone and file handling
  • Non-developers looking for a ready-made app
Step-by-step guide: how to use react-dropzoneInstall, first run, examples, tips and FAQs
react-dropzone alternativesFilePond vs react-dropzonePuck vs react-dropzonereact-dropzone vs React-Grid-Layoutdnd-kit vs react-dropzone

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js and npm or yarn · A React project

    Install with npm

    npm install react-dropzone

    Or install with yarn

    yarn add react-dropzone
  2. 2

    Run it

    • Install the package with npm or yarn in your React project
    • Import useDropzone from react-dropzone
    • Pass an onDrop callback to useDropzone and receive the accepted files
    • Spread getRootProps() onto a div and getInputProps() onto an input inside it
  3. 3

    Get the most out of it

    • Use the FileReader API inside onDrop when you need file contents
    • Use refKey when the element you apply props to does not expose a ref
    • Use the refs returned by useDropzone (rootRef, inputRef) instead of setting ref props yourself
    • Pass your own props through getRootProps so they are merged rather than overridden
    • Use the Dropzone component's ref to call open() programmatically

Downloads

Source code (.zip)master branch · straight from GitHubRelease v20.1.4Release notes and sourceOfficial website & docsreact-dropzone.js.org/

Strengths

  • Simple API built around a hook and two props-getter functions
  • Ships with ESM, CommonJS and TypeScript types, and works with common bundlers as the README describes
  • Well-known project with an MIT license and documentation site

Trade-offs

  • Only handles selecting and receiving files; uploading them to a server is left to your code, as the README does not describe an upload feature
  • Relies on careful use of getRootProps and getInputProps; the README warns that misuse can break file dialogs or override props
  • Some advanced use, like Material UI v4 refs, depends on older library versions

How it compares

ProjectStarsTypeLevelUpdatedBest for
react-dropzone (this)11kLibraryintermediate6 days agoReact developers adding file upload to a web app
filepond16.4kLibraryintermediate9 days agoWeb developers who need a polished upload widget in a site or app
react-grid-layout22.5kLibraryintermediate5 days agoReact developers building dashboards with movable panels
draggable18.5kLibraryintermediate11 months agoFront-end developers who want full control over how drag and drop feels and behaves
dnd-kit17.8kLibraryintermediate6 days agoDevelopers building sortable lists or grids in a React, Vue, Svelte, or Solid app
puck13.6kLibraryintermediate8 days agoReact developers adding a page builder to an existing app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.