Event propagation

If you'd like to prevent drag events propagation from the child to parent, use the noDragEventsBubbling property on the child. Note how the outer onDrop is never invoked when the drop occurs on the inner dropzone:

Inner dropzone

Outer dropzone

function InnerDropzone() {
  const {getRootProps} = useDropzone({noDragEventsBubbling: true});
  return (
    <div {...getRootProps({className: "dropzone"})}>
      <p>Inner dropzone</p>
    </div>
  );
}
 
function OuterDropzone() {
  const {getRootProps} = useDropzone({onDrop: files => console.log(files)});
  return (
    <div className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <InnerDropzone />
        <p>Outer dropzone</p>
      </div>
    </div>
  );
}

Disabling click

Turn off the default click behavior with noClick:

Dropzone without click events

const {getRootProps, getInputProps} = useDropzone({noClick: true});

Disabling keyboard

Turn off SPACE/ENTER and focus handling with noKeyboard:

Dropzone without keyboard events

(SPACE/ENTER and focus events are disabled)

const {getRootProps, getInputProps} = useDropzone({noKeyboard: true});

Disabling drag

Turn off drag 'n' drop with noDrag:

Dropzone with no drag events

(Drag 'n' drop is disabled)

const {getRootProps, getInputProps} = useDropzone({noDrag: true});

Stopping propagation yourself

If you provide your own handlers and call event.stopPropagation(), it prevents the default dropzone behavior (nothing is logged on drop here):

Drag 'n' drop some files here, or click to select files

<Dropzone onDrop={files => console.log(files)}>
  {({getRootProps, getInputProps}) => (
    <div {...getRootProps({className: "dropzone", onDrop: event => event.stopPropagation()})}>
      <input {...getInputProps()} />
    </div>
  )}
</Dropzone>