@cp949/react-beautiful-dnd
Advanced tools
Beautiful and accessible drag and drop for lists with React
This package descends from a chain of forks:
react-beautiful-dnd — the
original project, created by Alex Reardon at Atlassian. No longer maintained.@hello-pangea/dnd — community fork of
(1), continuing maintenance after Atlassian stepped back.@cp949/react-beautiful-dnd (this package) — fork of (2).tsdown (esbuild/rolldown-based). The
published dist no longer contains @babel/runtime helpers or
regenerator-runtime — consumers do not need @babel/runtime as a dependency.
The legacy UMD bundle (dnd.js, dnd.min.js) was dropped; only ESM and CJS
are published.@cp949/react-beautiful-dnd; dist file names changed
from dnd.* to react-beautiful-dnd.* to match. peerDependencies now allow
React 19 (^18.0.0 || ^19.0.0).eslint-config-airbnb (unmaintained
since 2021, incompatible with ESLint 9+) to ESLint 9 flat config.pnpm audit findings reduced from 168 to 0 by upgrading
express, webpack, cypress, lighthouse, and adjusting pnpm.overrides
for transitive dependencies with no direct upgrade path.markdown-it, lodash.isequal, fs-extra, and
fast-glob from devDependencies — each had exactly one call site, replaced
with Node's built-in fs/promises APIs or a small inlined implementation.Alex Reardon has created a free course on egghead.io 🥚 (using react-beautiful-dnd) to help you get started with @cp949/react-beautiful-dnd as quickly as possible.
<table> reordering - table pattern<Draggable />@atlaskit/tree package<Droppable /> list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)@cp949/react-beautiful-dnd exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:
There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. @cp949/react-beautiful-dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality @cp949/react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. One shortcoming is that grid layouts are not supported (yet). So @cp949/react-beautiful-dnd might not be for you depending on what your use case is.
The ways in which somebody can start and control a drag
<DragDropContext /> - Wraps the part of your application you want to have drag and drop enabled for<Droppable /> - An area that can be dropped into. Contains <Draggable />s<Draggable /> - What can be dragged around<DragDropContext /> responders - onDragStart, onDragUpdate, onDragEnd and onBeforeDragStart<Draggable />sinnerRefdraggableId and droppableIdsdoctypeTypeScript: type information<svg>s@cp949/react-beautiful-dnd<Draggable />s during a drag (11.x behaviour) - ⚠️ Advanced<Draggable /> - Using our cloning API or your own portalFAQs
Beautiful and accessible drag and drop for lists with React
We found that @cp949/react-beautiful-dnd demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Security News
Socket has released a free Certified Patch for a critical Rails Active Storage vulnerability, giving developers time to upgrade to a secure Rails version.
Security News
/Threat Research
A malicious Ruby gem runs a credential-stealing worm during installation, poisons AI coding tools, and can wipe files when a stolen GitHub token is revoked.
Security News
GitHub is tightening GitHub Actions security with new restrictions on privileged pull request workflows. Here's what changes and how maintainers are affected.