useDroppable
Arguments
Identifier
The id
argument is a string
or number
that should be a unique identifier, meaning there should be no other droppable elements that share that same identifier within a given DndContext
provider.
If you're building a component that uses both the useDroppable
and useDraggable
hooks, they can both share the same identifier since droppable elements are stored in a different key-value store than draggable elements.
Disabled
Since hooks cannot be conditionally invoked, use the disabled
argument and set it to true
if you need to temporarily disable a droppable
area.
Data
The data
argument is for advanced use-cases where you may need access to additional data about the droppable element in event handlers, modifiers or custom sensors.
For example, if you were building a sortable preset, you could use the data
attribute to store the index of the droppable element within a sortable list to access it within a custom sensor.
Another more advanced example where the data
argument can be useful is create relationships between draggable nodes and droppable areas, for example, to specify which types of draggable nodes your droppable accepts:
Properties
Node
setNodeRef
setNodeRef
In order for the useDroppable
hook to function properly, it needs the setNodeRef
property to be attached to the HTML element you intend on turning into a droppable area:
node
node
A ref to the current node that is passed to setNodeRef
rect
rect
For advanced use cases, if you need the bounding rect measurement of the droppable area.
Over
isOver
isOver
Use the isOver
boolean returned by the useDroppable
hook to change the appearance or content displayed when a draggable
element is dragged over your droppable container.
over
over
If you'd like to change the appearance of the droppable in response to a draggable being dragged over a different droppable container, check whether the over
value is defined. Depending on your use-case, you can also read the id
of the other droppable that the draggable item to make changes to the render output of your droppable component.
Last updated