Skip to content
Get packs

Guide · Open source

How to use react-dnd: install and build drag and drop in React

Updated · written with AI from the project's own documentation and checked against our catalogue data

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 saves you from writing the low-level pointer and browser event handling yourself. This guide shows you how to install it, what you need before starting, and where to find the detailed docs and examples.

React DnDreact-dnd/react-dnd · ★ 21.6k · MIT

Quick start

  1. 1Check prerequisites. Confirm you have Node.js and a React project. Learn the basics of React components if you are new to React.
  2. 2Install the package. Run npm install react-dnd in your project folder.
  3. 3Read the docs. Open the project website at http://react-dnd.github.io/react-dnd/ and go through the docs, tutorials and examples.
  4. 4Build a draggable item. Make one part of your interface draggable, following the examples on the website.
  5. 5Define drop targets. Set up where the draggable items can be dropped.
  6. 6Ask for help if stuck. Post your question in the #need-help channel of the Reactiflux Discord server.

What you need before you install react-dnd

React DnD is built for React components, so you need a React project and Node.js. The library is published on npm, which is where you get it from.

The README is brief and does not describe a beginner path. If you have little or no React experience, learn the basics of React components first, since the API assumes that familiarity.

  • Node.js installed
  • An existing React project
  • Some working knowledge of React components

Install react-dnd with npm

Run the npm install command from your project folder. The README points to the docs for the exact command and any backend packages you may need, so check them before you start.

npm install react-dnd

Find the docs, tutorials and examples

The README links to the project website at http://react-dnd.github.io/react-dnd/ for docs, tutorials and examples. Read these before writing your first draggable component, since the README itself is short.

Release notes are kept on the GitHub Releases page at https://github.com/react-dnd/react-dnd/releases. For questions, the README points to the Reactiflux Discord server, in the #need-help channel.

Build with draggable items and drop targets

React DnD lets you do two things: make parts of your interface draggable, and define where those items can be dropped. Use it for building blocks such as lists, boards or sortable elements.

Because it is a building block rather than a finished widget, you write the components and the behaviour yourself. If you need a ready-made drag-and-drop component with no custom code, this library is not that.

  • Make an element draggable
  • Define the places it can be dropped
  • Use it across lists, boards and sortable layouts

What people use it for

  • Sortable lists where users reorder items by dragging them
  • Kanban-style boards where cards move between columns
  • Drop zones that accept dragged elements inside a React interface

Frequently asked questions

Is react-dnd free to use?

Yes. The project is released under the MIT licence, as stated in the repository details. You can use it in your projects under the terms of that licence.

What do I need to use react-dnd?

You need Node.js and a React project. The library is installed from npm with npm install react-dnd. Basic React knowledge is needed because the API assumes it.

How do I install react-dnd?

Run npm install react-dnd in your project folder. The README says to check the docs for the exact command and any backend packages.

Where can I find react-dnd examples?

The project website at http://react-dnd.github.io/react-dnd/ hosts the docs, tutorials and examples. The README does not include code examples itself.

What are the alternatives to react-dnd?

Projects commonly compared with it include dnd-kit, react-beautiful-dnd and SortableJS. Pick based on whether you need a low-level building block or a more finished sortable component.

Can I use react-dnd without React?

No. The library is built for React components, so it is not a fit for projects that do not use React.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

React DnD suits React developers who want a shared, flexible drag-and-drop model and are comfortable writing their own components. It is a poor fit for non-React projects, beginners without React experience, or anyone who needs a finished drag-and-drop widget with no custom code, who should look at a more complete component or one of the comparable projects.

Install options & downloads