react-beautiful-dnd

react-beautiful-dnd (rbd) is Atlassian’s drag-and-drop library purpose-built for lists in React — vertical, horizontal, and movement between lists. It focuses on a natural, physical feel with beautiful motion, first-class keyboard and screen-reader accessibility, and high performance, all behind a small declarative API of DragDropContext, Droppable, and Draggable components.

Unlike general-purpose drag-and-drop toolkits, rbd is a higher-level abstraction specialized for reorderable lists, so common patterns like sortable lists, kanban boards, and multi-list movement take very little code. Note that the project is now archived and deprecated by Atlassian in favor of Pragmatic drag and drop, but it remains widely used with millions of weekly downloads.

What You Get

• Three composable components (DragDropContext, Droppable, Draggable) that add drag and drop without extra wrapper DOM nodes
• Built-in accessibility with full keyboard dragging and screen-reader announcements out of the box
• Support for vertical lists, horizontal lists, and movement between multiple independent lists
• Mouse, touch, and keyboard sensors plus a sensor API for scripted or custom drag experiences
• Auto-scrolling, combining items, virtual list support, and server-side-rendering compatibility

Common Use Cases

• Building sortable, reorderable lists such as to-do lists or ranked preferences
• Implementing kanban boards with cards that move between columns
• Reordering rows in semantic tables or items in configuration panels
• Creating accessible drag-and-drop interfaces that work for keyboard and screen-reader users

Under The Hood

Architecture - rbd is built around a single Redux store per DragDropContext (src/state/create-store.js) driven by a chain of middleware (drop, lift, auto-scroll, dimension-marshal, style-marshal, focus) that turns raw sensor input into reordering impact. The public components in src/view (drag-drop-context, droppable, draggable) connect to that store via react-redux, while marshals like dimension-marshal and use-sensor-marshal coordinate measuring elements and starting drags; geometry is computed with css-box-model and axis abstractions (src/state/axis.js) so vertical and horizontal lists share logic.

Tech Stack - The library is written in JavaScript with Flow type annotations (see the pervasive // @flow headers and src/types.js). Runtime dependencies are deliberately small: react-redux and redux for state, memoize-one for selector memoization, raf-schd for requestAnimationFrame scheduling, css-box-model for box geometry, and use-memo-one. It builds with Rollup (rollup.config.js) and Babel into CJS and ESM bundles, with Storybook and Cypress for demos and browser testing.

Code Quality - Code quality is high and battle-tested: the repo contains roughly 238 spec files under test/ covering state middleware, integration, accessibility, and server-side rendering, run via Jest. It uses invariant/dev-warning helpers for defensive runtime checks, Flow for static typing, and ESLint/Stylelint/Prettier for consistency. The modular one-concern-per-file layout in src/state and src/view keeps the reducer and view logic well separated.

API Design - The public API is small and ergonomic — three components plus a handful of hooks and utilities (resetServerContext, sensor hooks) exported from src/index.js — using render props that hand you provided/snapshot objects so you stay in control of markup and styling. Documentation is extensive (a full docs/ tree plus a free course), which lowers the barrier despite the inherent complexity of accessible drag and drop.