useDroppable
Use the useDroppable
hook to create droppable targets for draggable elements.
Usage
The useDroppable
hook requires an id
and accepts all the same options as the Droppable
class. Refer to the Input section below for more information.
API Reference
The useDroppable
hook is a thin wrapper around the Droppable class that makes it easier to create droppable targets in React. It therefore accepts all of the same input arguments.
Input
The useDroppable
hook accepts the following arguments:
The identifier of the droppable element. Should be unique within the same drag and drop context provider.
If you already have a reference to the element, you can pass it to the element
option instead of using the ref
that is returned by the useDraggable
hook to connect the draggable source element.
Optionally supply a type of draggable element to only allow it to be dropped over certina droppable targets that accept this type
.
Optionally supply a collision detector function can be used to detect collisions between the droppable element and draggable elements.
Optionally supply a number to set the collision priority of the droppable element. The higher the number, the higher the priority when detecting collisions. This can be useful if there are multiple droppable elements that overlap.
Set to true
to prevent the droppable element from being a drop target.
The data argument is for advanced use-cases where you may need access to additional data about the droppable element in event handlers, modifiers, sensors or custom plugins.
useDraggable
hook element is unmounted.Output
The useDroppable
hook returns an object containing the following properties:
A ref callback function that can be attached to the element that you want to use as a droppable target.
A boolean value that indicates whether the element is currently being dragged.
The droppable instance that is created by the useDroppable
hook.