React DnD

React DnD is a drag-and-drop library for React that helps you build sophisticated interfaces like sortable lists, kanban boards, and file drop zones. Rather than wrapping components in opaque widgets, it exposes a set of hooks (useDrag, useDrop, useDragLayer) that let your own components declare what they drag, what they accept, and how they respond, while a framework-agnostic core engine tracks drag state.

It separates the drag-and-drop logic from the rendering backend, shipping HTML5 and touch backends that can be swapped out, and keeps your components testable by moving the imperative browser event handling behind a declarative monitor and connector API.

What You Get

• The useDrag, useDrop, and useDragLayer hooks for wiring up drag sources, drop targets, and custom drag layers
• A framework-agnostic dnd-core engine that manages drag state independently of the rendering layer
• Swappable backends including an HTML5 backend and a touch backend for mobile support
• A monitor and connector API that keeps browser event handling out of your component code
• First-class TypeScript types for drag items, collected props, and drop results

Common Use Cases

• Building sortable lists and reorderable kanban-style boards
• Implementing file and card drop zones with visual feedback
• Creating custom drag previews and drag layers decoupled from the DOM
• Adding drag-and-drop to complex React apps while keeping components unit-testable

Under The Hood

Architecture - React DnD is split into a rendering-agnostic core (dnd-core) and a React binding layer (react-dnd). The core exposes a DragDropManager backed by a small redux store that holds drag state, a HandlerRegistry for registered sources and targets, and a DragDropMonitor for querying state; backends (HTML5, touch) translate raw browser events into core actions. In the React layer, hooks such as useDrag (src/hooks/useDrag) and useDrop compose smaller hooks that register a spec, subscribe a monitor, collect derived props, and return connector refs, keeping React re-renders driven by monitor subscriptions rather than DOM events.

Tech Stack - The library is written in TypeScript and published as a monorepo built with Turborepo and SWC, emitting both ESM and CommonJS bundles plus type declarations. Runtime dependencies are deliberately small: dnd-core for the engine, fast-deep-equal and hoist-non-react-statics, plus internal @react-dnd/invariant and @react-dnd/shallowequal utilities. It targets React 16.14+ via peer dependencies and keeps @types/react optional.

Code Quality - The codebase favors many small, single-responsibility hook modules and typed public APIs, using invariant checks to surface misuse (for example, guarding against the deprecated spec.begin). Testing is real and colocated: tests directories exist across core, internals, and each hook (useDrag, useDrop), exercised with Jest and @testing-library/react plus a dedicated test backend, and coverage is tracked via codecov.

API Design - The public surface is compact and ergonomic: three primary hooks return tuples of collected props and connector refs, and generic parameters let callers type the drag item, collected props, and drop result. The declarative spec object (item, collect, canDrop, drop) reads clearly, though the monitor/connector model and backend setup impose a real conceptual learning curve for newcomers, offset by extensive official docs, tutorials, and examples.