React DnD
A React library for adding drag-and-drop behavior to components.
- Stars
- 21.6k
- Forks
- 2k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 1.3 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
React DnD is a JavaScript library for React apps that lets you make parts of a user interface draggable and define where they can be dropped. It is used by developers who want drag-and-drop interactions without writing all the low-level pointer and browser event handling themselves. The README is brief and points to the project website for docs, tutorials and examples.
- Make list items reorderable by dragging them to new positions
- Let users drag cards between columns on a board-style screen
- Accept files or items dropped from outside the page, if supported by the chosen backend (confirm in the docs)
Great for
- React developers building interfaces with draggable items such as lists, boards or sortable elements
- Teams already using React who want a shared drag-and-drop model
- Developers who want to read the docs and examples on the project website before starting
Not ideal for
- Projects not using React, since the library is built for React components
- Beginners with no React experience, because the API assumes familiarity with React concepts (the README does not describe a beginner path)
- Projects needing a ready-made drag-and-drop widget with no custom code, since this is a building block rather than a finished component
How to get it
- 1
Install with a package manager
You'll need: Node.js and a React project
Install the package from npm (check the docs for the exact command and backend packages)
npm install react-dnd - 2
Run it
- Read the docs and examples on the project website to pick a drag-and-drop backend
- Install the library and any backend package the docs recommend
- Wrap your app in the provider the docs describe
- Mark an element as a drag source and another as a drop target using the documented hooks or APIs
- 3
Get the most out of it
- Follow the official tutorials on the project website to learn the core concepts
- Check the Releases page for the changelog before upgrading versions
- Ask questions in the Reactiflux Discord #need-help channel, as linked from the README
Downloads
Strengths
- Widely starred open-source project (about 21.6k stars at time of metadata) under the permissive MIT license
- Written in TypeScript, so type information is available to TypeScript users
- Has a project website with docs, tutorials and examples
Trade-offs
- The README itself is short and defers most detail to the external website, so details must be checked there
- The README does not state which browsers or touch devices are supported
- Requires writing your own React integration code; it is not a drop-in component
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-dnd (this) | 21.6k | Library | intermediate | 1.3 years ago | React developers building interfaces with draggable items such as lists, boards or sortable elements |
| dnd-kit | 17.8k | Library | intermediate | 6 days ago | Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app |
| Sortable | 31.2k | Library | beginner | 8 months ago | Web developers adding reorderable lists to a site or app |
| Vue.Draggable | 20.5k | Library | intermediate | 2.7 years ago | Vue 2 developers adding drag-to-reorder lists to an app |
| filepond | 16.4k | Library | intermediate | 9 days ago | Web developers who need a polished upload widget in a site or app |
| react-sortable-hoc | 10.9k | Library | intermediate | 3.2 years ago | Existing React projects that already use react-sortable-hoc and need security fixes only |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.