Droppable
Use the useDroppable
hook to set up DOM nodes as droppable areas that draggable elements can be dropped over.
Usage
The useDroppable
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.
You can set up as many droppable containers as you want, just make sure they all have a unique 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.
If you need to dynamically render a list of droppable containers, we recommend you create a re-usable Droppable component and render that component as many times as needed:
For more details usage of the useDroppable
hook, refer to the API documentation section:
Last updated