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