useDropZone

elements

test coverage

Last changed: 9 days ago

Hook that provides drop zone functionality

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

Usage

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

source

Api

Parameters

Name	Type	Default	Note
target	Target	-	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

Returns

[boolean, File[] | null]

Parameters

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

Returns

[boolean, File[] | null]

Parameters

Name	Type	Default	Note
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

Returns

[StateRef<Target>, boolean, File[] | null]

Parameters

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

Returns

[StateRef<Target>, boolean, File[] | null]

Source

Source • Demo

Contributors

debabin

VLADISLAW9