Skip to content

useDropZone ​

elements
test coverage
Last changed: 7 days ago

Hook that provides drop zone functionality

typescript
import { useDropZone } from '@siberiacancode/reactuse';

Usage ​

typescript
const { overed, files } = useDropZone(ref, options);
// or
const { overed, files } = useDropZone(ref, () => console.log('callback'));
// or
const { ref, overed, files } = useDropZone(options);
// or
const { ref, overed, files } = useDropZone(() => console.log('callback'));

Demo ​

Api ​

Parameters

NameTypeDefaultNote
targetTarget-The target element drop zone's
options.dataTypes?DataTypes-The data types
options.multiple?boolean-The multiple mode
options.onDrop?(files: File[] | null, event: DragEvent) => void-The on drop callback function
options.onEnter?(event: DragEvent) => void-The on enter callback function
options.onLeave?(event: DragEvent) => void-The on leave callback function
options.onOver?(event: DragEvent) => void-The on over callback function

Parameters

NameTypeDefaultNote
targetTarget-The target element drop zone's
callback?(files: File[] | null, event: DragEvent) => void-The callback function to be invoked on drop

Parameters

NameTypeDefaultNote
options.dataTypes?DataTypes-The data types
options.multiple?boolean-The multiple mode
options.onDrop?(files: File[] | null, event: DragEvent) => void-The on drop callback function
options.onEnter?(event: DragEvent) => void-The on enter callback function
options.onLeave?(event: DragEvent) => void-The on leave callback function
options.onOver?(event: DragEvent) => void-The on over callback function

Parameters

NameTypeDefaultNote
callback?(files: File[] | null, event: DragEvent) => void-The callback function to be invoked on drop

Source ​

Source • Demo

Contributors ​

Avatardebabin
AvatarVLADISLAW9

Released under the MIT License.