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.

Core Concepts

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 @dnd-kit/core package:

1. The useDraggable hook - A React hook which makes HTML elements draggable.
2. The useDroppable hook - A React hook which makes HTML elements droppable areas.
3. The 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 @dnd-kit/sortable package:

1. The useSortable hook - A react hook which makes HTML elements sortable. The hook is a combination of the useDraggable and useDroppable hooks.
2. 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.

Examples

We'll be looking at four common types of drag and drop interactions:

1. Free Drag-and-Drop - Drag draggable components across the entire page, similar to apps such as Figma and Excalidraw.
2. Droppable Containers - Drag multiple draggable components into one or more designated droppable containers.
3. Single Container Sortable List - A sortable list within a single container.
4. Multi-Container Sortable List - Sortable lists within multiple sortable containers.

Free Drag-and-Drop

A user interface that allows users to pick up and drag an element across the entire page.

Droppable Containers

A user interface that allows users to pick up and drag an element into designated droppable areas

Single Container Sortables

A container containing a list of items that can be rearranged by dragging them.

Multi-Container Sortables

A list that can be sorted and items that can be dropped into multiple containers.

Closing Thoughts

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!