Implement Drag and Drop in a react app with react-beautiful-dnd

BstaR
BstaR
Apr 20 · 6 min read

react-beautiful-dnd provides an easy to use API to implement drag and drop

Are you building a Trello clone with draggable cards or a table with draggable rows and columns or you are building some other cool application where you allow the user to drag and drop objects? Do, you use react? Well, you don’t really need to implement everything from scratch then. There are packages like react-dnd and react-beautiful-dnd which can help you. While react-dnd is more powerful, react-beautiful-dnd is simple and easy to use.

We are going to build a rearrangeable list with a bunch of items with react-beautiful-dnd. It is developed by Atlassian and has over 18k stars on GitHub. We will be using react functional components with hooks. Checkout this sandbox for code. Let's get started with the main concepts of react-beautiful-dnd.

react-beautiful-dnd structure
react-beautiful-dnd structure
  • <DragDropContext /> - It wraps the part of our application we want to have drag and drop enabled for.
  • <Droppable /> - This is an area where <Draggable />s can be dropped into. Droppable contains Draggable items.
  • <Draggable /> - These are the items which can be dragged and dropped inside Droppable.

Start a react project and install react-beautiful-dnd with the below command.

npm i react-beautiful-dnd

To start with I have a function which generates a list of column objects with id, little and items properties. The items is an array of objects with id and title.
Now, I have built a List component which renders the list of items. ListItem component renders an item passed to it.
import React from "react";

List.jsx

import ListItem from "./ListItem";

ListItem.jsx

import React from "react";

Now my App.jsx imports List and pass the data to it.

App.jsx

import React, { useState } from "react";

Added some styles

styles.css

.App {

Time to implement drag and drop!

Lets import DragDropContext from react-beautiful-dnd in App.jsx. We need to wrap our component where we want to provide drag and drop. List component in our case. Only required prop to this is onDragEnd. We are providing an empty function for now. We will be updating the function later. So our new App.jsx looks like below.

return (

As we have seen from the diagram above We need to wrap the area of our application with Droppable where actual drag and drop will happen. Import it from react-beautiful-dnd. Only required prop here is droppableId. It uses render props pattern. So, we need to provide a render function to it. The first argument here is an object typically named provided which has droppableProps and innerRefs, to be assigned to the root of the droppable. provided also gives us a placeholder component to be placed inside droppable. The second argument is the snapshot of the current state of the inner dropable component. So here the updated List component.

List.jsx

import React from "react";

Now we need to update our ListItem to make it draggable. We are going to wrap the component with Draggable from react-beautiful-dnd. draggableId and index are only required props here. It also accepts a render function. The first argument is an object with innerRef and draggableProps to be assigned to the root of the Draggable component. First arg also has a dragHandleProps property which can a be passed to the root component or any other component if we want a custom drag handle. The second argument is the snapshot of the inner Draggable component. Here is the updated ListItem component.

import React from "react";

Wow, we can drag our items in the list now!! Now let us update the onDragEnd function defined earlier to retain the new position of items on drag. It receives two arguments. The first one is the dropResult object with source, destination being the properties of our interest. The second argument is the ResponderProvided object. The source contains droppableId provided earlier and the index of the item. the destination is optional and can be null if the item is dropped outside of the droppable. The destination is an object with droppableId and index referring to the new position of the item.

const onDragEnd = result => {

Now we pass the onDragEnd function to the DragDropContext. So the updated App.jsx .

import React, { useState } from "react";

Now we have fully working drag and drop implemented 🎉🎉!! If you want your list to be horizontal just provide direction="horizontal" to the Droppable and set display:flex on the list.

However, We can do a lot of optimisation here. We will be discussing optimisations related to hooks in another article.

Let me know if you have any question. Any feedback will be appreciated.

Frontend Weekly

It's really hard to keep up with all the front-end…

BstaR

Written by

BstaR

Introvert, Athlete, Full stack developer, life long learner. Write on life and software development mostly js and react.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

BstaR

Written by

BstaR

Introvert, Athlete, Full stack developer, life long learner. Write on life and software development mostly js and react.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store