useIsDroppingFiles

About

useIsDroppingFiles detects file drags by looking for "Files" in dataTransfer.types. Use local mode to highlight one drop zone or window mode to display a page-wide target.

Example

import { useIsDroppingFiles } from "rooks";

export default function DropIndicator() {
  const [dropRef, isDroppingFiles] = useIsDroppingFiles();

  return (
    <section
      ref={dropRef}
      style={{ border: "2px dashed currentColor", padding: 24 }}
    >
      {isDroppingFiles ? "Release files here" : "Drag files over this area"}
    </section>
  );
}

Parameters

• Omit the parameter or pass false to target an element through the returned callback ref.
• Pass the literal true to target window.

Return value

Local mode returns [ref, isDroppingFiles], where ref accepts an HTMLElement | null. Window mode returns only the boolean isDroppingFiles.

Behavior and lifecycle

The hook prevents the default action for dragenter, dragover, dragleave, and drop. File enter/over events set the value to true; non-file drags, leave, and drop set it to false. It adds all four native listeners to the current target and removes them when the target changes or the component unmounts.

Compatibility and accessibility

Subscriptions start in an effect, so server rendering does not attach listeners. Drag and drop is pointer-dependent and may be unavailable on touch devices. Pair the drop zone with a labeled <input type="file"> so keyboard and assistive-technology users can choose the same files.

Related

• useFileDropRef validates and delivers dropped files.
• SSR and browser APIs covers client-only interactions.