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

Introduction

react-beautiful-dnd is a drag-and-drop library by Atlassian designed for reordering lists in React applications. It prioritizes accessibility, natural movement physics, and a declarative API that integrates cleanly with React component patterns.

What react-beautiful-dnd Does

• Enables vertical, horizontal, and cross-list drag-and-drop reordering
• Provides full keyboard navigation and screen reader announcements for every drag operation
• Applies physics-based movement with natural drop animations
• Supports conditional dragging, droppable placeholders, and scroll containers
• Works with virtualized lists via community adapters for react-window and react-virtualized

Architecture Overview

The library uses a context-based architecture with three core components: DragDropContext manages global drag state and events, Droppable defines drop zones using render props, and Draggable wraps each item. During a drag, the library calculates displacement maps and applies CSS transforms for performance, avoiding layout thrashing.

Self-Hosting & Configuration

• Install via npm or yarn and import the three core components
• Wrap your app or feature area in a single DragDropContext with an onDragEnd callback
• Define drop targets with Droppable and specify type for cross-list constraints
• Mark items with Draggable and spread the provided props onto DOM elements
• Use isDragDisabled on Draggable or isDropDisabled on Droppable for conditional control

Key Features

• Accessibility-first: ARIA live regions, keyboard shortcuts, and screen reader guidance built in
• Natural motion with spring physics and drop animation curves
• Multi-list support for Kanban boards and column-based layouts
• Auto-scrolling when dragging near container edges
• Sensor API for programmatic drag triggers in tests and automation

Comparison with Similar Tools

• dnd-kit — Newer, more flexible, and actively maintained; react-beautiful-dnd is in maintenance mode
• react-dnd — Lower-level with backend adapters; requires more boilerplate for list reordering
• SortableJS — Framework-agnostic but React wrapper is less idiomatic than rbd's render-prop API
• Framer Motion layout — Animation-focused with drag support; not designed for multi-list reordering
• @hello-pangea/dnd — Community fork of rbd with active development and React 18 support

FAQ

Q: Is react-beautiful-dnd still maintained? A: Atlassian moved the project to maintenance mode in 2023. For new projects, consider @hello-pangea/dnd (a maintained fork) or dnd-kit.

Q: Does it work with React 18? A: It works in most cases but has known issues with StrictMode. The @hello-pangea/dnd fork resolves these.

Q: Can I use it for grid layouts? A: It is optimized for lists. Grid reordering is possible but not a first-class use case; dnd-kit handles grids better.

Q: How do I persist the new order after a drop? A: In the onDragEnd callback, splice the source item into the destination index and update your state or send the new order to your backend.

Sources

• https://github.com/atlassian/react-beautiful-dnd
• https://react-beautiful-dnd.netlify.app/