react-beautiful-dnd: Drag and drop for React lists
Accessible React library for list drag-and-drop interactions.
Learn more about react-beautiful-dnd
react-beautiful-dnd is a React component library that provides drag and drop functionality for list-based interfaces. It uses a sensor-based architecture to handle mouse, keyboard, and touch input, with a declarative API built around Draggable and Droppable components. The library implements accessibility features including keyboard navigation and screen reader announcements without requiring additional DOM wrapper nodes. Common use cases include reordering lists, moving items between lists, and implementing sortable interfaces in web applications.
Zero-Wrapper DOM Structure
Implements drag and drop without injecting extra DOM elements that break layouts. Preserves flexbox and CSS grid compatibility while maintaining native focus management and accessibility tree structure.
Built-in Accessibility Support
Includes keyboard navigation and screen reader announcements out of the box with customizable internationalization. Handles ARIA attributes and focus management automatically without additional configuration.
Virtual List Compatibility
Integrates with virtualized list libraries like react-window for performant drag-and-drop in lists with thousands of items. Maintains smooth 60fps interactions even when only visible items are rendered to the DOM.
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
function TaskList({ tasks }) {
const handleDragEnd = (result) => {
if (!result.destination) return;
const items = Array.from(tasks);
const [reordered] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reordered);
};
return (
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="tasks">
{(provided) => (
<ul {...provided.droppableProps} ref={provided.innerRef}>
{tasks.map((task, index) => (
<Draggable key={task.id} draggableId={task.id} index={index}>
{(provided) => (
<li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
{task.content}
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
);
}Adds React 18 support via updated peerDependency; no breaking changes or migration steps specified.
- –Upgrade to React 18 if desired; library now declares compatibility in package.json peerDependencies.
- –Review updated documentation for any usage changes; release notes do not detail specific doc updates.
React 17 is now supported; default sensors can be imported individually for custom configurations.
- –Import `useMouseSensor`, `useKeyboardSensor`, or `useTouchSensor` directly and pass them via the `sensors` prop.
- –Upgrade to React 17 if needed; release notes do not specify breaking changes or minimum version requirements.
Low-risk breaking release fixes unintended polyfilling and improves screen reader reliability; requires API changes only if you override aria attributes or provide custom screen reader messages.
- –Replace `liftInstruction` with `dragHandleUsageInstructions` and update any custom screen reader messaging to use `aria-describedby` instead of `aria-labelledby`.
- –Verify your app provides its own polyfills if needed, as rbd now uses `@babel/runtime` instead of `@babel/runtime-corejs2` and no longer polyfills as a side effect.
See how people are using react-beautiful-dnd
Related Repositories
Discover similar tools and frameworks used by developers
imgui
Immediate mode GUI library for 3D applications.
components
Material Design components and utilities for Angular applications.
astro
Static site generator with selective component hydration.
react-grid-layout
Responsive React grid system with drag-and-drop resizing.
AdminLTE
Production-ready Bootstrap 5 template with SCSS build tooling.