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

> A drag-and-drop library by Atlassian focused on beautiful, natural movement and accessibility for vertical, horizontal, and multi-list reordering.

## Install

Save in your project root:

# 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}>
            <Draggable draggableId="item-1" index={0}>
              {(provided) => (
                <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                  Item 1
                </li>
              )}
            </Draggable>
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
}
```

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

---
Source: https://tokrepo.com/en/workflows/asset-289d35e0
Author: AI Open Source