# react-dnd/react-dnd

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/react-dnd-react-dnd).**

21,636 stars · 2,014 forks · TypeScript · mit

## Links

- GitHub: https://github.com/react-dnd/react-dnd
- Homepage: http://react-dnd.github.io/react-dnd
- awesome-repositories: https://awesome-repositories.com/repository/react-dnd-react-dnd.md

## Topics

`drag-and-drop` `not-the-game` `react`

## Description

React DnD is a library for building complex drag-and-drop interfaces within React applications. It provides a declarative, component-based architecture that abstracts native browser drag-and-drop APIs, allowing developers to manage state and interactions between draggable sources and drop targets.

The library utilizes a dependency injection backend to decouple interaction logic from specific input methods, supporting mouse, touch, and native browser events through a unified normalization layer. It employs a registry pattern to track active drop zones and a monitor pattern to observe the lifecycle of drag operations, ensuring that state changes and element coordinates are propagated across the component tree via context.

These capabilities enable the creation of custom interfaces for dynamic content reordering and item organization. The framework manages the underlying state transitions and visual feedback requirements necessary for responsive user interactions.

## Tags

### User Interface & Experience

- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides a comprehensive set of React hooks for building complex drag-and-drop interfaces. ([source](http://react-dnd.github.io/react-dnd/examples))
- [List Reordering Components](https://awesome-repositories.com/f/user-interface-experience/list-reordering-components.md) — Enables real-time rearrangement of list and grid items through direct user manipulation.
- [Drag and Drop Interactions](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions.md) — Captures interaction events between sources and targets to update element positions dynamically. ([source](http://react-dnd.github.io/react-dnd/docs/overview))
- [Drag State Monitors](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-state-monitors.md) — Tracks drag progress and element coordinates to provide real-time visual feedback. ([source](http://react-dnd.github.io/react-dnd/docs/overview))
- [Interaction Toolkits](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-frameworks/interaction-toolkits.md) — Provides a toolkit for creating custom drag-and-drop behaviors with real-time coordinate tracking.
- [Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/interaction-handlers.md) — Manages complex state transitions and visual feedback for components responding to mouse or touch gestures.

### Web Development

- [Declarative Drag-and-Drop Libraries](https://awesome-repositories.com/f/web-development/declarative-drag-and-drop-libraries.md) — Abstracts native browser drag-and-drop APIs into a declarative, component-based architecture.
- [Event Normalizers](https://awesome-repositories.com/f/web-development/event-systems/event-normalizers.md) — Normalizes native browser drag-and-drop events into a consistent internal format across different platforms.

### Software Engineering & Architecture

- [Dependency Injection](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection.md) — Decouples interaction logic from input methods using dependency injection for swappable event drivers.
- [Context State Propagators](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-patterns/context-state-propagators.md) — Propagates drag-and-drop state across the component tree using context providers.