Drag & Drop in React with Dnd Kit
DnD Kit is a relatively new, hook-based library that makes it easy to create performant and accessible drag-and-drop UI interactions in React. I have been using the library a lot at Super, particularly in our new dashboard, and I wanted to share some examples of the kind of interactions that can be built with it.
In this post, I will provide a brief overview of the core concepts behind
@dnd-kit and then i’ll move on to a number of code examples with explanations. If you need more detail about anything i cover, you can always check out the documentation here.
Drag-and-drop interactions on the web typically involve three elements:
- a draggable component that can be dragged,
- a droppable area where draggable components can be dropped over, and
- a system that manages the interaction between the draggable components and the droppable areas.
To see how these elements typically come together, you can play with the demo below:
In the demo, we can drag our draggable components and drop them anywhere on the page. However, we can also restrict the dropping of our draggable components to particular areas:
DndKit is designed around this approach, providing three core primitives exported from the
useDraggablehook - A React hook which makes HTML elements draggable.
useDroppablehook - A React hook which makes HTML elements droppable areas.
DndContext- A context provider which manages the interaction between draggable and droppable components using the React Context API.
Drag-and-drop interactions often require more than just dragging and dropping components. For example, take a look at the demo below:
In the demo, we have a list. When we drag a single item, it automatically sorts with its other siblings. This type of interaction is known as a sortable interface, where components are both draggable and droppable. We can refer to these components as "Sortable Components".
Sortable components can be used in a variety of ways. For instance, we can have multiple containers with sortable list items, enabling users to sort the containers, list items, and drag items between them:
To handle this use case,
@dnd-kit exposes a set of presets from the
useSortablehook - A react hook which makes HTML elements sortable. The hook is a combination of the
SortableContext- An additional context provider which manages the interactions between sortable components.
Let's now explore how to use the primitives and presets to create various drag-and-drop interactions.
We'll be looking at four common types of drag and drop interactions:
- Free Drag-and-Drop - Drag draggable components across the entire page, similar to apps such as Figma and Excalidraw.
- Droppable Containers - Drag multiple draggable components into one or more designated droppable containers.
- Single Container Sortable List - A sortable list within a single container.
- Multi-Container Sortable List - Sortable lists within multiple sortable containers.
A user interface that allows users to pick up and drag an element across the entire page.
A user interface that allows users to pick up and drag an element into designated droppable areas
A container containing a list of items that can be rearranged by dragging them.
A list that can be sorted and items that can be dropped into multiple containers.
I hope I managed to demonstrate the power of DndKit. Its strength lies in its flexibility. You can use it to create anything from a simple to-do list to a complex sortable interface.
I hope you enjoyed this post. If you have any questions, you can reach me on Twitter @kxlaa_ and I'll be happy to answer them.
Thank you for reading and happy coding!