Event propagation

Call event.stopPropagation() in your own onDrop to opt out of react-mediadrop's default handling.

Passing your own onDrop to getRootProps() runs before react-mediadrop’s own drop handling. Call event.stopPropagation() inside it and the default handling — adding the dropped files — never runs.

Call event.stopPropagation() in a custom onDrop

Drag files here, or click to browse

TSX

import { useMediaDrop } from "react-mediadrop";

export function EventsExample() {
	const { acceptedFiles, getRootProps, getInputProps } = useMediaDrop();

	return (
		<div className="space-y-3">
			<div
				{...getRootProps({
					onDrop: (event) => {
						event.stopPropagation(); // skips react-mediadrop's own drop handling
					},
				})}
				className="cursor-pointer rounded-lg border-2 border-dashed border-zinc-300 px-6 py-10 text-center dark:border-zinc-700"
			>
				<input {...getInputProps()} />
				<p>Drag files here, or click to browse</p>
			</div>
			<ul className="space-y-2">
				{acceptedFiles.map((file) => (
					<li
						key={file.id}
						className="rounded-md border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-800"
					>
						{file.name} — {file.size.toLocaleString()} bytes
					</li>
				))}
			</ul>
		</div>
	);
}

The same applies to onClick, onKeyDown, onFocus, and onBlur passed to getRootProps(), and onChange/onClick passed to getInputProps() — your handler runs first, and calling stopPropagation() on the event skips react-mediadrop’s own handling for that interaction.