react-dropzone

Simple HTML5 drag-and-drop zone for file uploads in React — handles file selection, validation, and previews with a flexible hook API.

react-dropzone

React

Simple HTML5 drag-and-drop zone for file uploads in React — handles file selection, validation, and previews with a flexible hook API.

npm GitHub Docs

Fit

Bundle (gzip)

16.3 kB

59.9 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Building a file upload UI with drag-and-drop requires wiring up native drag events, handling edge cases like folder drops, and managing file type/size validation — all of which is repetitive and cross-browser inconsistent.

What It Does

useDropzone returns props for a container element that activates on file drag/drop or click. It normalizes browser differences, validates accepted file types and size limits, and provides the list of accepted and rejected files with detailed reasons.

Installation

bash

npm install react-dropzone

Usage Example

tsx

import { useDropzone } from 'react-dropzone';

export function Uploader() {
  const { getRootProps, getInputProps, acceptedFiles, isDragActive } = useDropzone({
    accept: { 'image/*': [] },
    maxSize: 5 * 1024 * 1024,
  });

  return (
    <div {...getRootProps()} style={{ border: '2px dashed #ccc', padding: 20 }}>
      <input {...getInputProps()} />
      {isDragActive ? <p>Drop files here...</p> : <p>Drag & drop or click to select</p>}
      <ul>{acceptedFiles.map((f) => <li key={f.name}>{f.name}</li>)}</ul>
    </div>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.