useDropZone
A React Hook that allows you to create a dropzone.
Demo
Try to drop a PNG file from your computer, or just test the over state via image below.
SourceDrop files here
(The photo below is merely a image, NOT a file. You need to drop files here from your explorer to see files list)
No files dropped 🤷
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const { isOverDropZone, files } = useDropZone(elementTarget, options)
ElementTarget
ElementTarget is a union type that represents various kinds of elements that can be targeted.
See ElementTarget or ElementTarget Types for more details.
Options
export type UseDropZoneOptions = {
/**
* The file types that are accepted by the drop zone.
*/
dataTypes?: string[] | ((types: readonly string[]) => boolean)
/**
* A callback that is called when the user drops files in the drop zone.
*/
onDrop?: (files: File[] | null, event: DragEvent) => void
/**
* A callback that is called when the user drags files over the drop zone.
*/
onEnter?: (files: File[] | null, event: DragEvent) => void
/**
* A callback that is called when the user drags files out of the drop zone.
*/
onLeave?: (files: File[] | null, event: DragEvent) => void
/**
* A callback that is called when the user drags files over the drop zone.
*/
onOver?: (files: File[] | null, event: DragEvent) => void
}
Returns
export type UseDropZoneReturns = {
/**
* The files that were dropped in the drop zone.
*/
files: File[] | null
/**
* Whether the user is currently dragging files over the drop zone.
*/
isOverDropZone: boolean
}
