react-beautiful-dnd — Accessible Drag and Drop for React Lists

Introduction

react-beautiful-dnd was created by Atlassian to provide a high-quality drag-and-drop experience for lists. It emphasizes smooth physics-based animation, keyboard navigation, and screen-reader support. While the project is now archived, it remains one of the most widely installed DnD libraries in the React ecosystem.

What react-beautiful-dnd Does

• Enables vertical, horizontal, and multi-list drag-and-drop reordering
• Animates items with natural physics-based movement out of displaced positions
• Supports full keyboard-driven drag operations with screen-reader announcements
• Handles conditional dragging and dropping via guard functions
• Provides render-prop components for complete control over markup and styling

Architecture Overview

The library uses a context-based architecture with three main components: DragDropContext manages global drag state and lifecycle callbacks, Droppable defines drop targets, and Draggable wraps individual items. During a drag, the library calculates displacement using the item dimensions collected in a pre-drag phase. Animations run via CSS transforms for performance, and a sensor system abstracts mouse, touch, and keyboard input.

Installation & Configuration

• Install with npm or yarn: npm install react-beautiful-dnd
• Wrap the draggable area in a single DragDropContext at or near the app root
• Assign unique droppableId to each Droppable and draggableId to each Draggable
• Implement onDragEnd to persist reorder changes to your state
• Use the direction prop on Droppable for horizontal lists

Key Features

• Physics-based drop animation with configurable easing
• First-class keyboard and screen-reader accessibility
• Conditional drag and drop via isDragDisabled and isDropDisabled
• Multi-drag pattern support for selecting and moving multiple items
• Works with virtualized lists via react-window integration

Comparison with Similar Tools

• dnd-kit — actively maintained modern alternative with a modular plugin architecture
• @hello-pangea/dnd — community fork that continues maintenance after the archive
• react-dnd — lower-level API with more flexibility but requires more setup
• SortableJS — framework-agnostic; less React-idiomatic
• Pragmatic drag and drop — Atlassian successor with broader scope beyond lists

FAQ

Q: Is react-beautiful-dnd still maintained? A: The repository was archived by Atlassian. Community forks like @hello-pangea/dnd continue development. Pragmatic drag and drop is the official successor.

Q: Can I use it with virtualized lists? A: Yes. There is an integration pattern with react-window. The library does not ship a virtualizer itself.

Q: Does it support nested drag and drop? A: Nested lists are partially supported. Complex nesting scenarios may require workarounds or an alternative library like dnd-kit.

Q: How does it handle mobile touch events? A: It includes a built-in touch sensor that translates touch gestures into drag operations with long-press activation.

Sources

• https://github.com/atlassian/react-beautiful-dnd
• https://github.com/hello-pangea/dnd