# React DnD — Drag and Drop for React Applications

> A set of React utilities for building complex drag-and-drop interfaces while keeping components decoupled.

## Install

Save in your project root:

# React DnD — Drag and Drop for React Applications

## Quick Use
```bash
npm install react-dnd react-dnd-html5-backend
```
```jsx
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <MyDraggableComponent />
    </DndProvider>
  );
}
```

## Introduction
React DnD is a drag-and-drop library for React built on a flexible backend architecture. Rather than wrapping the DOM drag-and-drop API directly, it exposes a set of hooks and higher-order components that let you describe drag sources and drop targets declaratively.

## What React DnD Does
- Provides `useDrag` and `useDrop` hooks for declarative drag-and-drop logic
- Supports swappable backends (HTML5, Touch, custom)
- Enables complex interactions like sortable lists, kanban boards, and file drops
- Handles drag previews, custom layers, and snapping behavior
- Works with React's concurrent rendering and strict mode

## Architecture Overview
React DnD uses a monitor-based architecture inspired by Flux. A central DnD manager tracks drag state, while backends translate platform events into internal actions. Components subscribe to state changes through hooks, and the library reconciles updates efficiently without re-rendering the entire tree.

## Self-Hosting & Configuration
- Install the core package and at least one backend (HTML5 or Touch)
- Wrap your app in `<DndProvider backend={...}>` at the root level
- Configure drag preview images using the `preview` connector
- Use `useDragLayer` for custom floating drag layers
- Combine with `react-dnd-multi-backend` for simultaneous mouse and touch support

## Key Features
- Hook-based API that integrates cleanly with modern React patterns
- Backend-agnostic design allows testing without a real DOM
- Built-in support for nested drop targets with priority resolution
- Drag preview customization via custom render layers
- TypeScript support with full generic type parameters

## Comparison with Similar Tools
- **dnd-kit** — Newer alternative with simpler API; React DnD is more mature with broader community adoption
- **react-beautiful-dnd** — Opinionated and specialized for vertical/horizontal list reordering; React DnD is more general
- **SortableJS** — Framework-agnostic but less idiomatic in React; React DnD is designed for React
- **Pragmatic drag and drop** — Atlassian's lightweight approach; React DnD offers more built-in abstractions

## FAQ
**Q: Does React DnD support touch devices?**
A: Yes. Use the `react-dnd-touch-backend` package alongside or instead of the HTML5 backend.

**Q: Can I use it with Next.js or SSR?**
A: Yes, but the HTML5 backend requires a browser environment. Use dynamic imports or conditional rendering for SSR.

**Q: How does it compare to the native HTML5 drag-and-drop API?**
A: React DnD wraps the native API via backends and adds state management, type matching, and preview handling that the raw API lacks.

**Q: Is it still actively maintained?**
A: The project receives community contributions and remains widely used in production across many large codebases.

## Sources
- https://github.com/react-dnd/react-dnd
- https://react-dnd.github.io/react-dnd/

---
Source: https://tokrepo.com/en/workflows/asset-14dd9b81
Author: AI Open Source