React Beautiful Dnd: Step-by-Step Guide 2025

Drag and drop functionality is a cornerstone of modern, intuitive web applications. For developers using React, the react-beautiful-dnd library has long been a popular choice for creating these interactive experiences. This article provides a comprehensive guide to react-beautiful-dnd, from its core concepts to practical implementation. We will also address its current status as an abandoned project and explore powerful alternatives to help your team make informed decisions for future projects.

This guide is designed for engineering teams, frontend developers, and tech leads who want to master drag-and-drop interfaces in React. We'll provide practical insights, code examples, and a forward-looking perspective on the best tools for the job.

What is React Beautiful DnD?

react-beautiful-dnd is a library that enables developers to create accessible and beautiful drag-and-drop interfaces within React applications. Its primary use case is to allow users to reorder items in a list or move them between different lists. The library is known for its high-level features and capabilities that simplify the development process. If you care about accessible UX, our guide to the Laws of UX pairs well with this section.

In 2022, Atlassian announced that it would no longer be actively maintaining react-beautiful-dnd. The decision was made to focus on a new generation of drag-and-drop libraries. This has led many developers to seek alternatives for new projects, though the library remains functional for existing applications.

How to Install React Beautiful DnD?

You can install react-beautiful-dnd using either npm or yarn:

Bash

or

Bash

Setting Up the Environment

After installation, you can start integrating the library into your React application. The basic setup involves wrapping the part of your application that will have drag-and-drop functionality with the DragDropContext component.

Installation Troubleshooting

Some common issues during installation include dependency conflicts or errors like "cannot resolve react beautiful dnd." These can often be resolved by ensuring that your React and ReactDOM versions are compatible and by clearing your package manager's cache. f you suspect version clashes, review our primer on managing dependencies in code.

Basic Concepts and Key Components

react-beautiful-dnd is built around three core components that work together to create a seamless drag-and-drop experience.

1) DragDropContext

The DragDropContext component is the root component that wraps your entire drag-and-drop interface. It provides the context for all the draggable and droppable components within it. Its most important prop is onDragEnd, a callback function that is triggered when a drag operation concludes.

2) Droppable

The Droppable component designates an area where draggable items can be dropped. Each Droppable requires a unique droppableId and a function as a child that returns a React component. This function provides access to props and a ref that must be applied to the component you want to be droppable.

3) Draggable

The Draggable component makes an individual item draggable. Each Draggable needs a unique draggableId and an index prop. Similar to Droppable, it uses a function as a child to render the component, providing the necessary props to manage the drag-and-drop behavior.

How to Use React Beautiful DnD

Let's walk through a simple example of creating a drag-and-drop list.

Simple Drag-and-Drop List Example

Here is a basic implementation of a reorderable list:

JavaScript:

Handling the OnDragEnd Event

The onDragEnd event is crucial for persisting the new order of items. The result object contains the source and destination of the dragged item, which you can use to update your state.

Add Basic Styling

You can add basic styling to the draggable items to provide visual feedback to the user. For example, you can change the background color of an item while it is being dragged.

Testing with onDragEnd

To test the functionality, you can add a console.log(result) inside the onDragEnd handler. This will show you the source and destination information, allowing you to verify that the drag-and-drop is working as expected.

React Beautiful Dnd’s Advanced Features and Customizations

react-beautiful-dnd also supports more complex use cases.

1) Nested Droppable Areas

You can create nested droppable areas, such as a Kanban board with columns where you can reorder tasks. This is achieved by nesting Droppable components within each other.

2) Using React Beautiful DnD with Modals

Integrating drag-and-drop functionality inside modals or popups is possible, but it requires careful management of portals and context to ensure proper behavior.

3) TypeScript Support

The library has excellent TypeScript support. Using it in a TypeScript project is as simple as installing the @types/react-beautiful-dnd package. This provides type definitions for all the major components and props.

4) Animation

react-beautiful-dnd provides smooth animations out of the box. The library handles the visual effects of items moving and making space for others, creating a polished user experience.

5) Virtual Lists with React Beautiful DnD

For long lists, performance can be optimized by implementing virtualized lists. While react-beautiful-dnd does not have built-in support for virtual lists, it can be integrated with libraries like react-window or react-virtualized.

6) Grid Layouts

Implementing drag-and-drop with a grid system, such as MUI's (Material-UI) Grid, is a common use case. This allows for creating flexible and responsive layouts with draggable items.

React Beautiful DnD in Practice

Let's look at some practical applications of the library.

Kanban Board Example

A Kanban-style board is a classic example of react-beautiful-dnd in action. You can find numerous examples on CodePen that demonstrate how to build a fully functional Kanban board with multiple draggable columns.

Drag and Drop with Tables

The library can also be used to implement drag-and-drop functionality within tables, allowing users to reorder rows. This is particularly useful for data-heavy applications where users need to customize their view.

Combining Drag-and-Drop with Other UI Components

react-beautiful-dnd can be integrated with other popular React libraries like MUI and Ant Design. This allows you to combine powerful UI components with seamless drag-and-drop functionality. Start with best UI component libraries and our overview of React UI library tools.

Troubleshooting Common Issues

Here are some common issues you might encounter when using react-beautiful-dnd.

1) React Beautiful DnD Not Working

If items are not dragging or the list is not updating, ensure that you have correctly implemented the Draggable, Droppable, and DragDropContext components. Also, check for any console errors that might indicate a problem.

2) Solution to Invariant failed: isDropDisabled must be a boolean

This error occurs when the isDropDisabled prop is not a boolean. Make sure you are passing a boolean value to this prop.

3) Solution to Unable to find draggable errors

This error usually means that the Draggable component is not being rendered correctly within a Droppable. Check your component structure and ensure that the draggableId and index props are correctly set.

4) Fixing Dragging Behavior Problems

If draggable items get stuck or are misplaced when dragged, this could be due to incorrect styling or issues with the surrounding CSS. Ensure that your styling does not interfere with the library's positioning logic.

Alternatives to React Beautiful DnD in 2025

Since Atlassian deprecated react-beautiful-dnd in 2022, many developers have moved to more modern and actively maintained libraries. Here’s a quick comparison of the most popular alternatives:

Recommendation

• If you’re starting a new project, use dnd-kit — it’s the most modern, customizable, and future-proof.

• If you need complex drag-and-drop interactions (e.g., multi-type items, nested lists), react-dnd may be a better fit.

• If you just need lightweight list reordering, react-smooth-dnd can still work, but note its limited support.

Conclusion

react-beautiful-dnd has been an influential library in the React ecosystem, offering a simple and effective way to implement drag-and-drop functionality. While it is still a viable option for existing projects, its abandoned status means that developers should look to more modern, actively maintained alternatives like DnD Kit for new applications.

As we move forward, the focus on creating accessible, performant, and intuitive user interfaces will continue to drive the evolution of drag-and-drop libraries in React. By choosing the right tools and staying informed about the latest developments, we can build exceptional experiences for our users.

FAQ Section

1) Can I still use React Beautiful DnD?

Yes, it’s still functional but no longer actively maintained. If you need advanced features or new bug fixes, consider alternatives.

2) How to use React Beautiful DnD?

Use the provided examples and basic components (DragDropContext, Droppable, Draggable) to get started.

3) Which is better, React DnD or React Beautiful DnD?

React DnD is more flexible but less opinionated, whereas react-beautiful-dnd offers a more structured and easier-to-use API. It depends on the project’s needs and complexity.

4) What to use instead of React Beautiful DnD?

DnD Kit, Pragmatic Drag and Drop, React DnD, or alternatives like React Sortable HOC.

5) What is react-beautiful-dnd?

React Beautiful DnD is a drag-and-drop library for React developed by Atlassian. It provides an accessible and performant way to build lists, boards, and reorderable interfaces using simple components like DragDropContext, Droppable, and Draggable.

6) Is react-beautiful-dnd still maintained?

No. Atlassian officially deprecated react-beautiful-dnd in 2022. The library still works but will no longer receive updates. Developers are encouraged to use alternatives such as dnd-kit or react-dnd for long-term projects.

7) How do I install react-beautiful-dnd?

You can install it using npm or yarn:

npm install react-beautiful-dnd

# or

yarn add react-beautiful-dnd

8) How do I use react-beautiful-dnd in my project?

Wrap your components in a DragDropContext and use Droppable containers to define areas where items can be dropped. Each draggable item should be wrapped with Draggable. The onDragEnd callback handles updates when the drag finishes.

9) What are the main components in react-beautiful-dnd?

• DragDropContext: The wrapper that provides drag-and-drop context.

• Droppable: Defines an area where items can be dropped.

• Draggable: Represents an item that can be dragged.

10) How do I fix “invariant failed” or common errors in react-beautiful-dnd?

Common fixes include:

• Ensuring each Draggable has a unique draggableId.

• Wrapping content inside provided.innerRef and spreading provided.draggableProps and provided.dragHandleProps.

• Making sure your Droppable has the correct droppableId.

11) What are the alternatives to react-beautiful-dnd in 2025?

• dnd-kit – Actively maintained, modern, and highly customizable.

• react-dnd – Built on top of HTML5 drag-and-drop API, powerful for complex use cases.

• react-smooth-dnd – Lightweight option for simple drag-and-drop lists.