useDropZone

Category

Elements

Export Size

967 B

Last Changed

5 days ago

Create a zone where files can be dropped

WARNING

Due to Safari browser limitations, file type validation is only possible during the drop event, not during drag events. As a result, the isOverDropZone value will always be true during drag operations in Safari, regardless of file type.

Demo

Usage

import { useDropZone } from '@reause/core'
import { useRef } from 'react'

function Component() {
  const dropZoneRef = useRef<HTMLDivElement>(null)

  function onDrop(files: File[] | null) {
    // called when files are dropped on zone
  }

  const { isOverDropZone } = useDropZone(dropZoneRef, {
    onDrop,
    // specify the types of data to be received.
    dataTypes: ['image/jpeg'],
    // control multi-file drop
    multiple: true,
    // whether to prevent default behavior for unhandled events
    preventDefaultForUnhandled: false,
  })

  return (
    <div ref={dropZoneRef}>
      Drop files here
    </div>
  )
}

Type Declarations

export type UseDropZoneCallback = (files: File[] | null, event: DragEvent) => void

export interface UseDropZoneOptions {
    dataTypes?: readonly string[] | ((types: readonly string[]) => boolean);
    checkValidity?: (items: DataTransferItemList) => boolean;
    onDrop?: UseDropZoneCallback;
    onEnter?: UseDropZoneCallback;
    onLeave?: UseDropZoneCallback;
    onOver?: UseDropZoneCallback;
    multiple?: boolean;
    preventDefaultForUnhandled?: boolean;
}

export interface UseDropZoneReturn {
    isOverDropZone: boolean;
    files: File[] | null;
    onDrop: (fn: UseDropZoneCallback) => () => void;
    onDragEnter: (fn: UseDropZoneCallback) => () => void;
    onDragLeave: (fn: UseDropZoneCallback) => () => void;
}

export function useDropZone(target: RefObject<HTMLElement | Document | null | undefined>, options?: UseDropZoneOptions | UseDropZoneOptions['onDrop']): UseDropZoneReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.7 on

534c2 - refactor(shared)!: return the off function from listener registrars

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

cb90f - fix(core): resolve useDropZone audit findings (#546)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)