react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React

weekly downloads2.0M

versionv13.1.1

licenseApache-2.0

categoryfrontend

drag and dropdndsortablereorderreorderablereactreact.jsnaturalbeautifulaccessible

Overview

react-beautiful-dnd is a React library developed by Atlassian for implementing drag-and-drop functionality specifically optimized for lists. Unlike general-purpose drag-and-drop libraries, it focuses exclusively on vertical lists, horizontal lists, grids, and multi-list interactions with smooth, physics-based animations that feel natural to users.

The library solves a common problem in web applications: reordering items in lists should be intuitive and accessible, but implementing it from scratch requires handling mouse events, touch gestures, keyboard navigation, screen readers, and edge cases. react-beautiful-dnd abstracts this complexity into three core components—DragDropContext, Droppable, and Draggable—with a declarative API that integrates naturally with React's component model.

With nearly 2 million weekly downloads, react-beautiful-dnd powers task management interfaces, sortable tables, customizable dashboards, and any UI requiring list reordering. Atlassian uses it in their own products, and it's become the de facto choice for React developers building Trello-like boards or prioritization interfaces. The library emphasizes accessibility with full keyboard support and screen reader announcements out of the box.

Performance is a key strength: it handles virtualized lists with 10,000+ items at 60fps, uses CSS transforms for animations, and avoids unnecessary re-renders. The library is unopinionated about styling, allowing developers to implement their own visual feedback using snapshot state objects passed to render props.

Quick Start

typescript

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const initialItems = [
  { id: 'task-1', content: 'Review pull requests' },
  { id: 'task-2', content: 'Update documentation' },
  { id: 'task-3', content: 'Fix navigation bug' },
  { id: 'task-4', content: 'Deploy to staging' }
];

function TaskList() {
  const [items, setItems] = useState(initialItems);

  const handleDragEnd = (result) => {
    if (!result.destination) return;
    
    const reorderedItems = Array.from(items);
    const [movedItem] = reorderedItems.splice(result.source.index, 1);
    reorderedItems.splice(result.destination.index, 0, movedItem);
    
    setItems(reorderedItems);
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="task-list">
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            style={{
              background: snapshot.isDraggingOver ? '#e3f2fd' : '#f5f5f5',
              padding: 16,
              minHeight: 200
            }}
          >
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      userSelect: 'none',
                      padding: 16,
                      margin: '0 0 8px 0',
                      background: snapshot.isDragging ? '#1976d2' : '#fff',
                      color: snapshot.isDragging ? '#fff' : '#000',
                      border: '1px solid #ddd',
                      borderRadius: 4,
                      ...provided.draggableProps.style
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default TaskList;

Use Cases

Kanban boards and project management tools: Drag tasks between columns (e.g., To Do, In Progress, Done) with multi-list support. The library handles dropping items into different lists and provides source/destination metadata for updating state.

Reorderable todo lists and prioritization interfaces: Users drag items to change priority or sequence. The onDragEnd callback provides old and new indices, making state updates straightforward with array manipulation.

Sortable tables and data grids: Reorder table rows by dragging, useful for manual sorting or custom ordering in admin panels. Works with both simple and complex table structures.

Customizable dashboards with widget arrangement: Drag dashboard widgets or panels to personalize layouts. Supports both vertical stacks and horizontal grids with automatic scroll behavior during drags.

Nested list hierarchies and tree structures: Move items between parent/child relationships in file explorers, category managers, or organizational charts. Supports nested Droppable components for hierarchical data.

Pros & Cons

Pros

+Excellent accessibility with built-in keyboard navigation, screen reader support, and ARIA attributes without additional configuration
+Smooth, natural animations using physics-based motion that feels responsive, not robotic or linear
+Highly performant with virtualized list support, handling thousands of items without frame drops
+Clean API with minimal boilerplate—three components cover most use cases with render props pattern
+Works seamlessly with existing CSS layouts including flexbox and grid without requiring wrapper elements

Cons

−Development has slowed significantly since 2021 with infrequent updates and limited response to issues
−Strictly optimized for lists—not suitable for freeform dragging like canvas elements or arbitrary positioning
−Bundle size is larger than modern alternatives (around 50KB minified), impacting initial load in size-sensitive applications
−Limited TypeScript support with types maintained separately, leading to occasional type mismatches
−Cannot easily combine with other drag-and-drop libraries due to event handling conflicts

Alternatives

@dnd-kit/corev6.3.1

dnd kit – a lightweight React library for building performant and accessible drag and drop experiences

frontend

8.0M / week

Comparisons

@dnd-kit/core vs react-beautiful-dnd

frontend

Install

bash

npm install react-beautiful-dnd

bash

pnpm add react-beautiful-dnd

bash

bun add react-beautiful-dnd

Overview

Quick Start

typescript

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const initialItems = [
  { id: 'task-1', content: 'Review pull requests' },
  { id: 'task-2', content: 'Update documentation' },
  { id: 'task-3', content: 'Fix navigation bug' },
  { id: 'task-4', content: 'Deploy to staging' }
];

function TaskList() {
  const [items, setItems] = useState(initialItems);

  const handleDragEnd = (result) => {
    if (!result.destination) return;
    
    const reorderedItems = Array.from(items);
    const [movedItem] = reorderedItems.splice(result.source.index, 1);
    reorderedItems.splice(result.destination.index, 0, movedItem);
    
    setItems(reorderedItems);
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="task-list">
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            style={{
              background: snapshot.isDraggingOver ? '#e3f2fd' : '#f5f5f5',
              padding: 16,
              minHeight: 200
            }}
          >
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      userSelect: 'none',
                      padding: 16,
                      margin: '0 0 8px 0',
                      background: snapshot.isDragging ? '#1976d2' : '#fff',
                      color: snapshot.isDragging ? '#fff' : '#000',
                      border: '1px solid #ddd',
                      borderRadius: 4,
                      ...provided.draggableProps.style
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default TaskList;

Use Cases

Sortable tables and data grids: Reorder table rows by dragging, useful for manual sorting or custom ordering in admin panels. Works with both simple and complex table structures.

Pros & Cons

Pros

+Excellent accessibility with built-in keyboard navigation, screen reader support, and ARIA attributes without additional configuration
+Smooth, natural animations using physics-based motion that feels responsive, not robotic or linear
+Highly performant with virtualized list support, handling thousands of items without frame drops
+Clean API with minimal boilerplate—three components cover most use cases with render props pattern
+Works seamlessly with existing CSS layouts including flexbox and grid without requiring wrapper elements

Cons

−Development has slowed significantly since 2021 with infrequent updates and limited response to issues
−Strictly optimized for lists—not suitable for freeform dragging like canvas elements or arbitrary positioning
−Bundle size is larger than modern alternatives (around 50KB minified), impacting initial load in size-sensitive applications
−Limited TypeScript support with types maintained separately, leading to occasional type mismatches
−Cannot easily combine with other drag-and-drop libraries due to event handling conflicts