react-dropzone-esm

react-dropzone-esm is a drop-in fork of the popular react-dropzone library, repackaged with proper ESM and CJS bundles so it works cleanly with modern build tools like Vite and Remix v2 as well as older bundlers like Webpack 4. The underlying useDropzone hook and <Dropzone> component behavior are untouched — only the packaging changes, so existing react-dropzone code and documentation apply directly.

It exposes prop getters (getRootProps, getInputProps) that wire up drag-and-drop and click-to-browse file selection, along with accept/reject rules based on MIME type, file size, and file count. It is maintained primarily as a dependency of the Mantine @mantine/dropzone package, with manual testing performed on each release.

What You Get

• The full useDropzone hook API from react-dropzone, unmodified, for building custom drop zones
• A <Dropzone> render-prop component wrapper for simpler use cases
• Native ESM (.mjs) and CommonJS bundles with correct package.json exports for Vite, Remix v2, Next.js, and Webpack 4
• File acceptance and rejection based on MIME type, extension, min/max size, and file count
• Support for the File System Access API (useFsAccessApi) as an alternative to the native <input type="file"> picker

Common Use Cases

• Adding a drag-and-drop upload zone to a form built with a modern meta-framework (Next.js, Remix)
• Building custom file upload UI on top of the useDropzone hook’s prop getters
• Replacing react-dropzone in a project blocked by its CJS-only packaging
• Consuming it indirectly via @mantine/dropzone in a Mantine-based UI

Under The Hood

Architecture The library centers on a single useDropzone hook (src/index.jsx) built around a useReducer state machine tracking drag state, accepted/rejected files, and focus; a thin <Dropzone> component (forwardRef + render-prop children) wraps the hook for consumers who prefer JSX composition over a raw hook. File acquisition is delegated to file-selector.js, which normalizes DragEvent, <input type="file"> change events, and File System Access API handles into a single fromEvent() interface, while utils.js and attr-accept.js hold pure validation helpers (MIME/extension matching, size checks). This separation keeps event-source handling, validation, and React state cleanly decoupled — changing the underlying picker mechanism (e.g. adding a new event source) only touches file-selector.js, not the hook itself.

Tech Stack A plain JavaScript/JSX codebase (no build-time framework dependency beyond React itself, declared as a peer dependency for React 16.8+ and 18.x) with prop-types for runtime prop validation. The package is bundled with Rollup (rollup.config.mjs) using rollup-plugin-esbuild for transpilation and rollup-plugin-node-externals to keep peer/runtime dependencies external, producing separate dist/esm and dist/cjs outputs plus hand-authored .d.ts/.d.mts type declarations in types/. Yarn 4 (Berry) manages the workspace, and there is no CI configuration in this fork’s repo — release scripts (release:patch/minor/major) run the build and npm publish directly.

Code Quality No test files exist anywhere in the repository — the README explicitly states verification is manual, performed against @mantine/dropzone on each release rather than through an automated suite. Naming and structure are consistent and readable, with JSDoc comments documenting most public hook options directly above useDropzone. There is no linter or formatter configuration checked in beyond a .editorconfig, and no typed source (the implementation is JS/JSX; types are hand-maintained separately in types/), so type accuracy depends on manual upkeep rather than compiler-checked source.

API Design The public surface mirrors react-dropzone’s well-established useDropzone(options) -> { getRootProps, getInputProps, ...state } prop-getter pattern, which is a widely understood convention (shared with libraries like downshift) requiring minimal boilerplate: spread two functions onto a container and an input, done. Options are grouped logically (accept/size/count constraints, drag/keyboard/click toggles, callbacks) and documented inline via JSDoc. Because this fork changes no API surface, existing react-dropzone documentation, examples, and community answers transfer directly, which is itself a deliberate developer-experience choice — zero migration cost beyond swapping the package name.