Drag and Drop for React


npm version npm downloads Build Status codecov Dependabot Status

React DnD

Drag and Drop for React.

See the docs, tutorials and examples on the website:


See the changelog on the Releases page:


Questions? Find us on the Reactiflux Discord Server (#need-help)


Technical Details

  • ESM/CJS Module Support
  • Ships w/ TS Typings
  • Browserlist Target: >0.25%, not dead

Shoutouts 🙏

BrowserStack Logo

Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.

  • Cannot have two HTML5 backends at the same time

    Cannot have two HTML5 backends at the same time

    Hi Dan,

    Just a quick one - I'm trying to use my own component that has react-dnd as a dependency in another app which itself uses react-dnd so the error above expected. In this case, what would be the best way to fix this?

    Since the other component is my own, I can remove the DragDropContext call from while exporting the component but then that sacrifices the re-usability of the component. What do you advise?

    opened by prakhar1989 74
  • CustomDragLayer slow performance

    CustomDragLayer slow performance

    Is there any reason why the CustomDragLayer for me is giving me bad performance? Its like theres low fps, or rather, the arbitrary object that I am dragging around is lagging and not looking smooth

    opened by jr69 47
  • Hooks API Discussion

    Hooks API Discussion

    Somebody was going to ask eventually! The new hooks API could possibly help here. I think most of the API can pretty much stay the same, with the HOC mapping directly into a hook.

    I do wonder if we can replace connectDragSource and connectDropTarget with just passing in the value of useRef. It could definitely make stuff cleaner if that's possible!

    design decisions discussion 
    opened by jacobp100 43
  • How can I get info about dragging files in canDrop method?

    How can I get info about dragging files in canDrop method?

    I want to restrict allowed files extension and need to know what files user is dragging, but console throws warning: NativeDragSources.js:61 Browser doesn't allow reading "files" until the drop event. So what is the best way of checking file extension or dragging files count before dropping it on drop target?

    opened by andrewQwer 36
  • Who uses React DnD?

    Who uses React DnD?

    In the past week, I closed a bunch of issues and pushed out a few releases but it’s hard to do this in isolation from understanding the user needs. This project has many stars but when there is an issue, it’s hard to say how many people it impacts, and why we don’t get more pull requests.

    The codebase is not documented and can be intimidating to outsiders, which I understand well. Is this the reason why we don’t get more pull requests for fixes? Or is it because the project is not used as widely as stars lead me to believe?

    I would like to ask the current users of React DnD to check in here to say a few words.

    • What products are you using React DnD in?
    • How useful do you find it?
    • How often do you have issues with it, and how frustrating are they?
    • Which features do you care about?
    • Can you attach a couple of screenshots of your product?

    This will help me understand how this project fits in the ecosystem, and how much of my free time is worth allocating to it. Thanks!

    opened by gaearon 35
  • Invariant Violation: Expected targetIds to be registered.

    Invariant Violation: Expected targetIds to be registered.

    Hi there. We are getting this error (although the functionality is okay and works fine). Do you have any idea how it can happen? couldn't figure it out from the source code.

    opened by miadabrin 34
  • React DnD not work on Chrome 59

    React DnD not work on Chrome 59

    After upgrading to Chrome 59, react-dnd no longer works. After a bit investigating, it looks like Chrome no longer triggers "dragend" event which leads to react-dnd misunderstand when I try to drag the second item/time Anyone experience the same issue?

    opened by hunterbmt 33
  • Please add plain ES5 examples

    Please add plain ES5 examples

    Not all of us have the luxury of using newfangled ES7 syntax, it would be a lot of help for newcomer information overload if there could be a couple working examples that didn't introduce all these new language features (especially experimental features like ES7 decorators) in the examples. The usefulness of examples is diluted when cluttered with experimental language features.

    Edit from maintainer: please track them here: https://github.com/vkbansal/react-dnd-es5-examples

    opened by ghost 32
  • Support dragging multiple elements

    Support dragging multiple elements

    There is a common pattern that is hard to implement with native drag and drop: dragging multiple elements. While selection mechanics might vary from app to app (cmd+clicking, checkboxes, predefined groups), but it would be nice to at least make it possible to support this scenario.

    screen shot 2014-10-26 at 1 07 07

    Because multiple dragged items may not be siblings in DOM and setDragImage(element, x, y) is pretty much insane and hasn't gotten any better, we won't burden ourselves with trying to render several elements in drag preview at once.

    How can we help implement this scenario, if we can't show a "multiple" drag preview?

    In a way, this scenario is already possible: consumers can manually keep track of selected elements, set dragPreview to some kind of generic placeholder Image and react appropriately to the dropping of (as far as business logic is concerned) several elements.

    However there is currently no supported way for one element to know that it's part of a group that's being dragged. From react-dnd's point of view, if we drag something, this component gets getDragState(type).isDragging = true, but other components don't. From your app point of view, if you support multiple selection, you want all logically "selected" items to be aware that they're being dragged, even if only one of them is being actually "DOM-dragged".

    What we need is a way for components to tell react-dnd that, “hey, although onDragStart was received by another component, I want to pretend that I'm being dragged too, and have my getDragState(type) mirror dragged component's getDragState(type), and have my endDrag(didDrop) called too so I could do my stuff”.

    How would components opt into that?

    design decisions 
    opened by gaearon 32
  • Support ES6 classes

    Support ES6 classes

    React 0.13 will allow pure ES6 classes as components. React DnD currently relies on mixins.

    We should find a way to port current API to a more generic primitive that can be used equally well from our mixins and ES6 classes. Ideally mixins will just be a sugar over more basic functionality.

    This should inform the design of https://github.com/gaearon/react-dnd/issues/103 so we don't have to redo the API once again later.

    opened by gaearon 31
  • Customize the cursor during drag

    Customize the cursor during drag

    Fantastic library! Thanks for all your hard work in putting it together. I have a quick question: is it possible to customize the cursor such that during a drag operation, the cursor is always set to the same thing (specifically I want to set it to the dragging icon)?

    In other words, regardless of whether you are over a drop zone or not, the cursor remains the same. This is similar to how Trello has the cursor while dragging a note, for example.

    Thanks in advance!

    opened by dshorowitz 30
  • Allow changing of the components after drop

    Allow changing of the components after drop

    Hi there,

    I am not sure if this is already doable with React-dnd or not. Basically the component which I drag is not the final component to be dropped in the target. How do you change component after dropping on the target?

    Saying I drag a button but when I drop I want to drop specific component instead of a button


    opened by AsuraKev 0
  • backport react 18 jsx fix for non esm-version

    backport react 18 jsx fix for non esm-version

    Is your feature request related to a problem? Please describe.

    see my comment here https://github.com/react-dnd/react-dnd/issues/3423#issuecomment-1322347558

    https://github.com/react-page/react-page cannot be used in nextjs 13.

    Using react-dnd version 16 is also not possible, as it is pure ESM and that can only be used by packages that are also pure ESM. Which in turn is not feasible yet as too many packages are not yet compatible with ESM (e.g. @mui)

    Describe the solution you'd like

    either ship both ESM and commonjs or backport the react 18 fixes for non-esm version (15)

    Describe alternatives you've considered

    I spent 2 days migrating react-page to full ESM, but the world is not yet ready for ESM - unfortunatly. Its a mess.

    Alternative is that we fork react-dnd.

    opened by macrozone 1
  • Identifier import type error : Cannot find module 'dnd-core' or its corresponding type declarations

    Identifier import type error : Cannot find module 'dnd-core' or its corresponding type declarations

    I was following the simple sortable example at https://react-dnd.github.io/react-dnd/examples/sortable/simple, it's working but i'm getting this error whem trying to import the Identifier type import type { Identifier } from 'dnd-core'; Cannot find module 'dnd-core' or its corresponding type declarations

    i'm using:

    • NextJs 13.0.2
    • React : 18.2.0
    • React-dnd: 16.0.1
    • React-dnd-html5-backend: 16.0.1
    • Pnpm : 7.16.0
    • Typescript: 4.8.4
    opened by celioFagundes 0
  • docs: improve tutorial

    docs: improve tutorial

    Excellent project.

    I was practicing the chess game tutorial. And I saw that the Overlay component is not defined in the tutorial. Have added it in the PR


    opened by helloanoop 0
  • 🐛 Native onDrop action creating conflicts with react dnd teardown

    🐛 Native onDrop action creating conflicts with react dnd teardown

    Describe the bug

    When using native dnd and react dnd on the same page, react dnd doesn't unmount properly. Hence when the component renders again, window.__isReactDndBackendSetUp stays true and throws error. Teardown operation of react dnd doesn't happen when native dnd operation is performed in the same page.


    Live Reproduction

    Steps to reproduce the behaviour:

    1. Create a list with react-dnd.
    2. Create a container with native dnd.
    3. Perform native dnd operation.
    4. Unmount the react dnd component.
    5. Render the react dnd component again dynamically.
    6. Throws error

    Expected behaviour teardown() operation should be handled in react dnd even when native dnd operation is performed in the same page.

    Screenshots image

    Desktop (please complete the following information):

    • OS: iOS
    • Browser - chrome
    • Version 107.0.5304.87

    Additional context Add any other context about the problem here.

    opened by ragavavishal 0
  • v16.0.0(Apr 5, 2022)

  • v15.1.2(Feb 7, 2022)

    The utility packages @react-dnd/invariant, @react-dnd/shallowequal, and @react-dnd/asap (which are forks of popular libraries) have been included in the monorepo and built using the same output mechanisms as the react-dnd core packages (dual EJS/CSM).

    @react-dnd/asap has been simplified to remove the node variant, which relied on deprecated APIs

    Source code(tar.gz)
    Source code(zip)
  • v15.1.0(Feb 5, 2022)

  • v15.0.2(Feb 4, 2022)

  • v15.0.1(Feb 4, 2022)

  • v15.0.0(Feb 4, 2022)

    Major Changes

    • ~~The react-dnd packages are now published as ESM-only with type: module. See this FAQ by sindresorhus: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c~~

    • The Decorators API has been removed and fully replaced by the Hooks API. The Decorators API was difficult to develop & type correctly, and this improves its maintainability.

    • The builds no longer use babel & preset-env. The library is transpiled using SWC into the "es2017" target, which assumes async/await is available. This should reduce bundle sizes by removing polyfills and support-code which may be unnecessary in your target.


    • Improve data-transfer acquisition from File inputs (#3262)
    • Don't set the 'draggable' attribute unless canDrag is true (#3187)
    • Improve typings of DropTargetMonitor, DragLayerMonitor (#3300, #3341)
    Source code(tar.gz)
    Source code(zip)
  • v14.0.3(Aug 13, 2021)


    react-dnd: 14.0.3 react-dnd-html5-backend: 14.0.1 react-dnd-touch-backend: 14.1.0

    Patch Updates

    • Fix drop operations in iframes & child windows (#3181) (thanks @eramdam!)
    • Refactor TouchBackend OptionsReader (#3291)
    • Cleanup connected DOM elements from react-dnd internals when hook-based components unmount (#3290)
    • Fix issue where custom drag-sources where triggering native drops in Firefox (#3272) (thanks @istateside)
    Source code(tar.gz)
    Source code(zip)
  • v14.0.2(Mar 22, 2021)

  • v14.0.0(Mar 9, 2021)

    This release addresses a handful of nagging liveness and ergonomic issues with the hooks API.

    The liveness issues affect all hooks, and were discovered on deeper inspection of certain stress tests in the documentation. The internal useCollector() hook is used to collect props from the DnD system when things change. Prior to this update, we subscribed to updates from the DnD monitor to trigger prop collection. However, state on the react side was only accounted for on the first render. This release improves that liveness by collecting props whenever react state changes.

    The ergonomics of the useDrag have been refactored. In short:

    • spec.type is required
    • spec.item can be a function or static object.
    • The function version of spec.item replaces spec.begin

    Since the release of the hooks API, we packed type under spec.item. However, this led to nonintuitive situations where an item field was required to be specified even though items are created in the begin method.

    Additionally, in the original React-DnD design, beginDrag() was optional and the type of the draggables had to be defined. If no explicit DragObject was created, an implicit object was created by the system..

    The change we've made here decouples type from item, and collapses begin into item.

    // Pre-v14
       // item defined here to get a type
       item: { type: BOX } },
       // ...but the actual item is created here
       begin: () => ({ id })
    // v14
       type: BOX,
       item: () => ({id})

    e.g. useDrag({ item: { type: BOX }}) => useDrag({ type: 'BOX' })

    We've also added the ability to cancel drag operations in the hooks API by returning null from begin.

    // new API
      type: BOX,
      item: () => shouldNotDrag ? null : {id},
    Source code(tar.gz)
    Source code(zip)
  • v14.0.1(Mar 9, 2021)

  • 13.1.1(Feb 24, 2021)



    • Re-register drag sources in hooks API when item.type changes
    • Export missing typings



    • Export HTML5Context, HTML5BackendOptions interfaces
    Source code(tar.gz)
    Source code(zip)
  • v13.1.0(Feb 23, 2021)


    TLDR: useDrag and useDrop support both a memo pattern and a spec object now.

    useDrag(() => spec) // good
    useDrag(spec) // also good

    In v13, we've tried to address some errors that were pervading with the react-dnd hooks API. Generally, making sure DragSource/DropTargets were up-to-date and that the system wasn't leaking handles was a precarious balancing act. Moving to a memo API pattern (e.g. useDrag(() => spec)) fixed this problem in our tests.

    However, as we dug further into handler leakage issues, it became clear that anything using the hooks would reattach and receive a new handler ID whenever the spec changed at all. This was in contrast to the Decorator API's behavior of keeping stable handler IDs as the incoming props changed.

    To fix the Hooks API to stop leaking handlers, we found a pretty simple solution: a classical class with a public setter for the spec object that's updated via a useEffect hook. This neatly avoids the mutating DragSource/DropTargets on every spec change. This had two effects: identifiers have been stabilized, and spec objects were usable again because changing them didn't cause DragSource/DropTarget instances to be regenerated and reattached.

    In retrospect, this undoes the necessity of the major cut that happened with v13, but the Hooks API is much sturdier now. We hope that you find the improved memory stability in the hooks API to be useful in your projects.

    Source code(tar.gz)
    Source code(zip)
  • v13.0.1(Feb 23, 2021)

    Patch Updates

    • Add invariant() invocations in useDrag, useDrop to verify that spec functions are used instead of objects
    • Fix handler registration memory leak issue with useDrag, useDrop
    Source code(tar.gz)
    Source code(zip)
  • 13.0.0(Feb 22, 2021)

    React-DnD v13, Others v12

    v12 was largely structural and organizational, but some issues were discovered shortly after release that warranted changing the hooks API.

    Breaking Changes

    • useDrag, useDrop hooks accept functions that create spec objects instead of spec objects directly. Clients can think about the API to useDrag() and useDrop() as being analogous to useMemo(). This allows clients to have direct control over when their DnD specifications are re-generated (which internally reattaches them to the DnD system).
    • Use jsx-factory throughout the library

    Non-Breaking Changes

    • Add HTML native draggable type to HTML5Backend (see new example)
    • Clients can specify a rootElement component in the HTML5Backend options to localize where DnD will process events in the client app.
    • react-dnd-test-utils has improved support for testing with HTML5Backend and using @testing-library/react to simulate drag-and-drop sequences.
    Source code(tar.gz)
    Source code(zip)
  • v11.1.3(May 29, 2020)

  • v11.1.2(May 27, 2020)

  • v11.1.0(May 26, 2020)


    • Add getDecoratedComponent() method to wrapInTestContext imperative API. (#2488)


    • Improve typings of wrapInTestContext(#2486)
    • Eliminate module cycles in react-dnd (#2491)
    Source code(tar.gz)
    Source code(zip)
  • v11.0.0(May 24, 2020)

    Breaking Changes

    Update Backends to use named exports for BackendFactory functions instead of default exports.

    e.g. import HTML5Backend from 'react-dnd-html5-backend 👇 import { HTML5Backend } from 'react-dnd-html5-backend

    In general, throughout the app we've minimized the usage of default exports as well. They interfere with type correctness and screw with UMD builds (e.g. having to scrape a .default property off of a UMD global).

    Minor Changes

    • Expose internal hook useDragDropManager at top level
    • Add profiling function to backend interface
    • Make handler functions public on backends

    Patch Changes

    • Correct memory leak in drag previews (#2423)
    • Improve and correct typings
    Source code(tar.gz)
    Source code(zip)
  • v10.0.2(Dec 7, 2019)


    dnd-core: Use updated version @react-dnd/asap with browser variant support, this allows us to drop syntheticDefaultImports in dnd-core.

    Source code(tar.gz)
    Source code(zip)
  • v10.0.1(Dec 7, 2019)


    Fix UMD builds - our fork of ASAP was being brought in with node-specific code, breaking UMD builds. Using the canonical version of ASAP until we update our fork (#1684 )

    Source code(tar.gz)
    Source code(zip)
  • v10.0.0(Dec 7, 2019)


    The package.type=module setting has been removed. This proved to be a major pain point for users, and was technically problematic at this time. We will eventually ship with package.type=module when NodeJS 12 drops out of maintenance and all of our dependencies ship ESM. (#1683)


    The touch-backend has been updated to work-around iOS 13.x eventing issues (#1631) (thanks @zhusee2!)

    Source code(tar.gz)
    Source code(zip)
  • v9.5.1(Nov 26, 2019)


    • Remove syntheticDefaultImport usage of react in react-dnd (#1629) thanks @sandersn . Fully removing syntheticDefaultImport from react-dnd is a WIP. We will need pure ESM versions of asap and hoist-non-react-statics. Ideally invariant and shallowequal would have ESM builds available as well, but there are forked ESM variants of these packages.
    Source code(tar.gz)
    Source code(zip)
  • v9.5.0(Nov 25, 2019)

    Minor Changes

    • Declare packages side-effect free for tree-shaking (#1577), thanks @maclockard
    • HTML5Backend: Make file metadata available on dragstart event (#1610), thanks @LeopoldLerch
    • TestBackend: Add DragDropManager accessor to TestBackend (#1564), thanks @ezr-ondrej

    Patch Changes

    • Improve UMD builds to conform to browserslist support target, add some basic UMD verification tests
    Source code(tar.gz)
    Source code(zip)
  • v9.4.0(Sep 20, 2019)


    • UMD builds are now shipped with the react-dnd, react-dnd-html5-backend, and react-dnd-touch-backend packages in addition to react-dnd-umd-builds


    • Added refcounting to the DndProvider component. If the DndProvider is unmounted, the manager instance will be cleared out of the global context.
    Source code(tar.gz)
    Source code(zip)
  • v9.3.9(Aug 6, 2019)


    Apologies for the rapid series of patches - there was an error in the release process that was causing some of the processing of the CommonJS libraries to not function correctly.

    Source code(tar.gz)
    Source code(zip)
  • v9.3.4(Aug 5, 2019)


    • (Typings) - Add getTargetIds to DragSourceMonitor interface declaration (#1478)
    • Replace for..of statements with other looping semantics for older browser support (#1428
    • Add an isomorphic useLayoutEffect implementation for SSR (#1497)
    • Correct DragPreview connection logic for chainable connector functions (#1500)
    Source code(tar.gz)
    Source code(zip)
  • v9.3.3(Jul 12, 2019)


    • dnd-core-cj
    • react-dnd-html5-backend-cjs
    • react-dnd-cjs
    • react-dnd-test-backend-cjs
    • react-dnd-test-utils-cjs
    • react-dnd-touch-backend-cjs
    • react-dnd-umd-builds
    • react-dnd-test-utils


    • Corrected the CommonJS ‘main’ fields. These were copied from the core libraries, but when the ‘main’ field changed to ‘dist/esm’, this became invalid.
    • Added License Files to:
      • react-dnd-touch-backend (LICENSE File Added)
      • react-dnd-test-utils (LICENSE File Added)
    Source code(tar.gz)
    Source code(zip)
  • v9.3.2(Jul 11, 2019)


    • Fixed some issues in react-dnd where named exports of interfaces were causing JS breakage (#1462)
    • Added a cra-test package to verify that react-dnd can be used in the context of create-react-app by default (#1462)
    Source code(tar.gz)
    Source code(zip)
  • v9.3.1(Jul 11, 2019)

    Libraries Affected

    All libraries


    • Add CJS builds to the core packages in order to facilitate better testing. (#1455, #1460)


    • Correct some issues with interface imports/exports using Babel's TS transpilation (#1459)
    Source code(tar.gz)
    Source code(zip)
  • v9.2.1(Jul 11, 2019)


    • react-dnd
    • react-dnd-cjs
    • react-dnd-test-utils
    • react-dnd-test-utils-cjs
    • react-dnd-umd-builds


    • Redefine XYCoord interface in react-dnd interfaces (#1454)
    Source code(tar.gz)
    Source code(zip)
React DnD
Drag and Drop for React
React DnD
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Nov 19, 2022
React drag and drop sort support flex layout and nested.

react-flex-dnd React drag and drop sort support flex layout and nested. This package using hooks, note that your React version is above 16.8 :) Why fl

lvshihao 7 Nov 14, 2022
ReactJS drag and drop functionality for mouse and touch devices

DragDropContainer and DropTarget Live demo: peterh32.github.io/react-drag-drop-container Features Very easy to implement and understand. Works on mous

Peter Hollingsworth 142 Sep 26, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.6k Dec 5, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.6k Dec 6, 2022
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudéric Demers 6.2k Dec 6, 2022
Drag and Drop for React

Drag and Drop for React

React DnD 18.5k Dec 2, 2022
Light React Drag & Drop files and images library styled by styled-components

Light React Drag & Drop files and images library styled by styled-components

null 138 Dec 7, 2022
React Drag and Drop file input

React Drag and Drop file input

Tran Anh Tuat 43 Nov 8, 2022
React drag and drop framework with inbuilt virtualizing scrollbars.

About us This library was made by Forecast - powered by AI, Forecast is supporting your work process with a complete Resource & Project Management pla

Forecast 51 Sep 21, 2022
Drag and Drop library for React.

react-tiny-dnd Drag and Drop library for React. Demo Install via npm npm install react-tiny-dnd or yarn add react-tiny-dnd Features Vertical lists Eas

Rafael Hovhannisyan 27 Nov 27, 2022
Creating an app using Drag and Drop with React without libraries 🤏

Creating an app using Drag and Drop with React without libraries ?? ! This time, we are going to implement the functionality to do a Drag & Drop with

Franklin Martinez 5 Sep 23, 2022
:ok_hand: Drag and drop so simple it hurts

Drag and drop so simple it hurts Official React wrapper for dragula. Demo Try out the demo! Install You can get it on npm. npm install react-dragula -

Nicolás Bevacqua 976 Nov 26, 2022
A directive based drag and drop container for solid-js

A directive based drag and drop container for solid-js

Isaac Hagoel 52 Oct 31, 2022
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.

?? react-butterfiles A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field

Adrian Smijulj 45 Aug 26, 2022
Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

null 9.3k Nov 29, 2022
example how to use react-dropzone for drag 'n drop uploader

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Hendra_Adri 1 Nov 5, 2021
Taskboard with drag'n drop feature. Built w/ React, TypeScript

Drag & Drop Taskboard A taskboard application with drag and drop feature. Live demo is here. Tech Stack Language: TypeScript UI-Components: Ant Design

Onur Önder 36 Nov 26, 2022
"Drag to resize" (sizing) as React Component.

react-drag-sizing "Drag to resize" (sizing) as React Component Rewritten with TS & React-hooks Polyfill workaround with React < 16.8 Support both mous

Fritz Lin 13 Nov 7, 2022