Drag-and-Drop Made Easy: A Guide to React Beautiful DND

Unlock the Power of Drag-and-Drop Functionality with react-beautiful-dnd

Are you tired of building drag-and-drop features from scratch? Look no further! Atlassian’s open-source library, react-beautiful-dnd, is here to revolutionize the way you integrate drag-and-drop functionality into your applications.

What is react-beautiful-dnd?

react-beautiful-dnd is a highly customizable and popular drag-and-drop library in the React world. It allows web developers to easily integrate drag-and-drop functionality into their applications, making it an essential tool for building powerful and interactive user interfaces.

Key Features of react-beautiful-dnd

• Highly Customizable: react-beautiful-dnd provides a wide range of options and metadata, allowing you to create endless combinations and different use cases.
• No Additional DOM Nodes: The library ensures that building the layout is simple and predictable, making it easy to design your drag-and-drop items and lists.
• Deeply Integrated into the React Ecosystem: react-beautiful-dnd is built and controlled around key React components, making it easy to use and integrate into your existing React applications.

Using react-beautiful-dnd Components for Drag-and-Drop Functionality

To get started with react-beautiful-dnd, you’ll need to understand the three main components: DragDropContext, Droppable, and Draggable.

• DragDropContext: This is the context that contains all the information about your drag-and-drop lists. It’s based on the React context, so you should wrap everything related to drag-and-drop with this element to make it work properly.
• Droppable: This element contains your list and the drop zone that will be the source when elements are dropped. It must be identified with a droppableId and wrapped around a function that returns a React element.
• Draggable: This is a container for all list elements. You must wrap every single one of your list items with this element.

Building a Drag-and-Drop List with react-beautiful-dnd

Let’s create a simple drag-and-drop list using react-beautiful-dnd. First, we need some data for the demonstration:

jsx
const data = [
{ id: 1, title: 'Item 1' },
{ id: 2, title: 'Item 2' },
{ id: 3, title: 'Item 3' },
];


Next, we’ll set up the drag-and-drop elements:

jsx
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="list">
{data.map((item, index) => (
<Draggable key={item.id} index={index}>
{(provided) => (
<div ref={provided.innerRef} {...provided.draggableProps}>
{item.title}
</div>
)}
</Draggable>
))}
</Droppable>
</DragDropContext>


Handling the Drag-and-Drop Animation

To handle the drag-and-drop animation, we need to implement the onDragEnd function:

jsx
const onDragEnd = (result) => {
const { destination, source } = result;
if (!destination) {
return;
}
const newData = [...data];
const [removed] = newData.splice(source.index, 1);
newData.splice(destination.index, 0, removed);
setData(newData);
};


Building Multiple Drag-and-Drop Lists with react-beautiful-dnd

Now that we’ve seen the basic functions, let’s look at a more advanced use case. Perhaps you have multiple lists and want to drag and drop items not only within each list but also between lists, as you would on a Kanban board.

To accomplish this, we’ll need to wrap everything in DragDropContext and create a constant that contains the information about what lists we want:

“`jsx
const lists = [
{ id: 1, title: ‘List 1’ },
{ id: 2, title: ‘List 2’ },
];

const [data, setData] = useState({
1: [
{ id: 1, title: ‘Item 1’ },
{ id: 2, title: ‘Item 2’ },
],
2: [
{ id: 3, title: ‘Item 3’ },
{ id: 4, title: ‘Item 4’ },
],
});
“`

We’ll then iterate over the lists and render each list element:

jsx
{lists.map((list) => (
<Droppable key={list.id} droppableId={list.id}>
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{data[list.id].map((item, index) => (
<Draggable key={item.id} index={index}>
{(provided) => (
<div ref={provided.innerRef} {...provided.draggableProps}>
{item.title}
</div>
)}
</Draggable>
))}
</div>
)}
</Droppable>
))}


Managing State

The tricky part is deciding where and how we want to keep our state. Because we can have items that change from list to list, we need to move the state up into the wrapping component that holds all of the lists.

Get Started with react-beautiful-dnd Today!

With react-beautiful-dnd, you can create powerful and interactive user interfaces with ease. Try it out today and take your application to the next level!