Installation - react-mediadrop

react-mediadrop ships as a single npm package — no separate core or transport package to install.

Requires React 18+.

pnpm add react-mediadrop

npm install react-mediadrop

yarn add react-mediadrop

bun add react-mediadrop

Next.js / RSC

useMediaDrop uses useSyncExternalStore/useEffect, so it only runs in a Client Component. Forgetting this is the single most common integration mistake — if you hit an error like:

Error: You're importing a component that needs `useState`. It only
works in a Client Component but none of its parents are marked with
"use client", so they're Server Components by default.

add "use client" to the top of the file that calls useMediaDrop:

"use client";

import { useMediaDrop } from "react-mediadrop";

Quickstart

Wire up a dropzone in a few lines

Agent skill

Let your AI coding agent integrate this package for you

Roadmap

Quickstart

​Next.js / RSC

Quickstart

Agent skill

Next.js / RSC