Event Handling
useIsDroppingFiles
Detects when files are being dragged over the document for a drop operation.
About
Check if files are currently being dragged over an element or the window.
Examples
Highlight a local drop zone
import { useIsDroppingFiles } from "rooks";
export default function App() {
const [ref, isDropping] = useIsDroppingFiles();
return (
<div
ref={ref}
style={{
padding: 24,
border: "2px dashed #999",
background: isDropping ? "#fee2e2" : "#fff",
}}
>
{isDropping ? "Release files to upload" : "Drag files here"}
</div>
);
}Track file drags anywhere in the window
import { useIsDroppingFiles } from "rooks";
export default function App() {
const isDroppingOnWindow = useIsDroppingFiles(true);
return (
<p>
{isDroppingOnWindow
? "Files are hovering over the window"
: "No files are being dragged right now"}
</p>
);
}