# gaearon/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/gaearon-react-dnd).**

21,642 stars · 1,999 forks · TypeScript · MIT

## Links

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

## Description

React-dnd is a drag and drop framework and library for React applications. It provides a system of higher-order components and hooks to implement draggable interface elements and drop targets using a declarative API.

The framework separates the logic of moving items from the visual presentation of the user interface. This allows for the development of interactive interfaces, such as visual list reordering and custom dashboard layouts where widgets or panels can be reorganized.

## Tags

### User Interface & Experience

- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides a comprehensive library for implementing draggable items and drop targets. ([source](https://github.com/gaearon/react-dnd#readme))
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Offers a set of higher-order components and hooks designed specifically for the React ecosystem.
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Facilitates the development of interactive user interfaces where elements can be moved and rearranged.
- [Backend Adapters](https://awesome-repositories.com/f/user-interface-experience/browser-based-interfaces/backend-adapters.md) — Provides a standard interface to connect core logic to specific browser DOM event implementations.
- [Context-Based Dependency Injection](https://awesome-repositories.com/f/user-interface-experience/context-based-dependency-injection.md) — Uses React Context to share the drag and drop backend and state manager across the component tree.
- [Dashboard Layout Engines](https://awesome-repositories.com/f/user-interface-experience/dashboard-layout-engines.md) — Enables the creation of flexible dashboard interfaces where widgets and panels can be reorganized by dragging.
- [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) — Uses a central monitor to track the current dragged item and trigger updates across registered components.
- [Event-Driven Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-models/event-driven-interaction-handlers.md) — Communicates state changes between draggables and targets through a system of events and callbacks.
- [Higher-Order Components](https://awesome-repositories.com/f/user-interface-experience/functional-components/higher-order-components.md) — Wraps components to inject shared drag and drop state and event handlers via higher-order components.
- [List Reordering Components](https://awesome-repositories.com/f/user-interface-experience/list-reordering-components.md) — Implements the ability to visually rearrange items within lists or grids via drag and drop.
- [Rendering Backends](https://awesome-repositories.com/f/user-interface-experience/rendering-backends.md) — Implements an abstraction layer that decouples drag and drop logic from specific platform rendering APIs.

### Web Development

- [Declarative Drag-and-Drop Libraries](https://awesome-repositories.com/f/web-development/declarative-drag-and-drop-libraries.md) — Uses a declarative API to define draggable interface elements and drop targets in React.

### Part of an Awesome List

- [Drag and Drop](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop.md) — Drag-and-drop framework for React.