Start building drag and drop interfaces with React in minutes.
@dnd-kit/react
package provides a set of React components and hooks that you can use to build drag and drop interfaces. It is thin React integration layer built on top of the vanilla library, so all of the same concepts are shared and can be used. You can refer to the vanilla documentation of these concepts, such as plugins, modifiers, and sensors.
@dnd-kit/react
in your project:
useDraggable
hook.
The useDraggable
hook requires a unique id
, and returns a ref
that you can attach to any element to make it draggable.
useDroppable
hook.
Like the useDraggable
hook, the useDroppable
hook requires a unique id
, and returns a ref
that you can attach to any element to make it droppable.
This time, we’ll accept the id
argument as a prop of the Droppable
component.
DragDropProvider
component to wrap our draggable and droppable elements.
This component handles the drag and drop interactions between our draggable and droppable elements and allow us listen to drag and drop events.
useDraggable
hook.useDroppable
hook.useSortable
hook.