
Usage
TheuseDroppable
hook isn’t opinionated about how you should structure your application.
At minimum though, you need to pass the setNodeRef
function that is returned by the useDroppable
hook to a DOM element so that it can register the underlying DOM node and keep track of it to detect collisions and intersections with other draggable elements.
If the concept of
ref
is new to you, we recommend you first check out the Refs and the DOM article on the React documentation website.id
so that they can be differentiated. Each droppable needs to have its own unique node though, so make sure you don’t try to connect a single droppable to multiple refs.
To set up multiple droppable targets, simply use the useDroppable
hook as many times as needed.
useDroppable
hook, refer to the API documentation section:
useDroppable