useDropZone

v0.0.15testeddemo

Create a drag-and-drop file drop zone on a target element or document.

Example

const dropZone = useTemplateRef<HTMLElement>('dropZone');
const { isOverDropZone, files } = useDropZone(dropZone, {
  dataTypes: ['image/png'],
  onDrop: (files) => console.log(files),
});

Demo

Loading demo…

Signature

export function useDropZone(
  target: MaybeComputedElementRef | MaybeRefOrGetter<Document | null | undefined>,
  options: UseDropZoneOptions | UseDropZoneOptions['onDrop'] ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`any`	—	The element (or document) acting as the drop zone.
`options`?	`UseDropZoneOptions \| ((files: File[] \| null, event: DragEvent) => void) \| undefined`	`{}`	Drop zone options, or a shorthand `onDrop` callback.

Returns

UseDropZoneReturnThe reactive drop zone state.