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

> A drag-and-drop library for React that provides beautiful, accessible list reordering with keyboard and screen reader support out of the box.

## Install

Save as a script file and run:

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

## Quick Use
```bash
npm install react-beautiful-dnd
```
```jsx
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const onDragEnd = (result) => { /* reorder logic */ };
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="list">
        {(provided) => (
          <ul ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, i) => (
              <Draggable key={item.id} draggableId={item.id} index={i}>
                {(prov) => <li ref={prov.innerRef} {...prov.draggableProps} {...prov.dragHandleProps}>{item.text}</li>}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
}
```

## 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/


---
Source: https://tokrepo.com/en/workflows/asset-7cb5f1fe
Author: Script Depot