@hello-pangea/dnd

@hello-pangea/dnd is a community-maintained continuation of react-beautiful-dnd, providing a small set of components — DragDropContext, Droppable, and Draggable — for building natural-feeling drag and drop interactions with vertical and horizontal lists in React. Rather than exposing low-level drag primitives like react-dnd, it targets the specific, common case of reordering and moving items between lists, and does the accessibility work (keyboard operation, screen reader announcements, focus retention) that most drag and drop libraries leave to the consumer.

Under the hood it runs a Redux-backed state machine that reconciles pointer, touch, and keyboard input through a pluggable sensor API, measures dimensions via css-box-model, and recalculates displacement and auto-scroll behavior on every frame without inserting extra wrapper DOM nodes. The result is a library that plugs into existing markup (including semantic tables) and keeps working with server-side rendering, virtualized lists of thousands of items, and multi-drag selections.

What You Get

• DragDropContext, Droppable, and Draggable components that wrap existing markup without adding extra DOM nodes
• Built-in mouse, touch, and keyboard sensors, plus a sensor API for scripted or custom input sources
• Automatic screen reader announcements and full keyboard operability for drag interactions out of the box
• Virtual list support capable of handling ten thousand items at 60fps
• Auto-scrolling of both the dragged container and the window during a drag, including with the keyboard
• TypeScript type definitions for every public API, published alongside the compiled bundle

Common Use Cases

• Reordering rows in a task list, playlist, or todo app
• Kanban-style boards where cards move between columns
• Reordering rows in a semantic HTML table
• Drag-to-reorder form fields or configurable dashboard widgets

Under The Hood

Architecture

The library is split into a pure state layer and a DOM-facing view layer. State transitions run through a single reducer (src/state/reducer.ts) driven by typed actions (src/state/action-creators.ts) inside a small Redux store (src/state/create-store.ts); pure helpers like get-displaced-by, get-displacement-groups, and patch-dimension-map recompute which draggables move as a result of a drag without touching the DOM. The view layer’s marshals (use-draggable-publisher, use-droppable-publisher, dimension-marshal) measure real elements via css-box-model and publish those dimensions into the store, while DragDropContext → App wires context providers down to Droppable/Draggable consumers. Input itself is abstracted behind a sensor API (use-sensor-marshal, mouse/touch/keyboard sensors) that all funnel into the same reducer actions, so a mouse drag, a touch drag, and a scripted drag are indistinguishable to the state machine. Because nearly every consumer subscribes to derived state from this one reducer, changes to the core dimension/displacement model ripple through the whole view layer.

Tech Stack

Written in TypeScript (99% of the codebase) with React as a peer dependency supporting both React 18 and 19 test matrices, using Redux 5 and react-redux 9 for internal state, css-box-model for measuring boxes, and raf-schd for scheduling animation-frame work. The published package is built with Rollup into CommonJS and ESM bundles plus .d.ts types, transformed through Babel for both the build and the Jest test suite, and developed against Storybook 8 for interactive examples with Chromatic wired in for visual regression testing.

Code Quality

Testing is extensive and layered: Jest-driven unit tests cover state and view logic (test/unit/state, test/unit/view, test/unit/integration), dedicated typing tests exercise the public TypeScript API (test/typings), a documentation-consistency suite checks the docs against the code (test/unit/docs), and Cypress drives real browser end-to-end tests. The project enforces strict typing, ESLint with typescript-eslint, Stylelint, and Prettier, all gated by Husky pre-commit hooks and commitlint-enforced Conventional Commits, with CircleCI running the full validate-and-test matrix (including both supported React versions) on every change.

What Makes It Unique

Most React drag and drop libraries expose low-level primitives and leave accessibility to the consumer; this one narrows its scope to lists specifically and treats keyboard operability and screen reader announcements as default behavior rather than an add-on. It also avoids wrapping dragged elements in extra DOM nodes, so drag handles compose cleanly with existing flexbox layouts, focus management, and even semantic tables, while still supporting virtualized lists and a scriptable sensor API for non-standard input sources.