Gathering detailed insights and metrics for react-beautiful-dnd
@types/react-beautiful-dnd
TypeScript definitions for react-beautiful-dnd
@hello-pangea/dnd
Beautiful and accessible drag and drop for lists with React
@kanaries/react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React, supports shadow DOM
react-beautiful-dnd-next
Beautiful and accessible drag and drop for lists with React
Beautiful and accessible drag and drop for lists with React
npm install react-beautiful-dndTypescript
Module System
Node Version
NPM Version
JavaScript (99.99%)
HTML (0.01%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
326,242,239
Last Day
384,904
Last Week
1,894,952
Last Month
7,876,806
Last Year
83,209,346
NOASSERTION License
33,737 Stars
820 Commits
2,674 Forks
244 Watchers
107 Branches
181 Contributors
Updated on Mar 14, 2025
Minified
Minified + Gzipped
Latest Version
13.1.1
Package Id
react-beautiful-dnd@13.1.1
Unpacked Size
1.33 MB
Size
302.52 kB
File Count
239
NPM Version
8.11.0
Node Version
16.15.1
Cumulative downloads
Total Downloads
78
This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and have no current plans for further feature development or improvements.
It will continue to be here on GitHub and we will still make critical updates (e.g. security fixes, if any) as required, but will not be actively monitoring or replying to issues and pull requests.
We recommend that you don’t raise issues or pull requests, as they will not be reviewed or actioned until further notice.
We have created a free course on egghead.io 🥚 to help you get started with 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)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. 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 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. So 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 aroundresetServerContext() - Utility for server side rendering (SSR)<DragDropContext /> responders - onDragStart, onDragUpdate, onDragEnd and onBeforeDragStart<Draggable />sinnerRefdraggableId and droppableIdsdoctypeTypeScript and flow: type information<svg>sreact-beautiful-dnd<Draggable />s during a drag (11.x behaviour) - ⚠️ Advanced<Draggable /> - Using our cloning API or your own portalAlex Reardon @alexandereardon
Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 10/13 approved changesets -- score normalized to 7
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
119 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreLast Day
13.2%
384,904
Compared to previous day
Last Week
7.6%
1,894,952
Compared to previous week
Last Month
12%
7,876,806
Compared to previous month
Last Year
5.4%
83,209,346
Compared to previous year
한글/Korean
На русском/Russian
Português/Portuguese
Ελληνικά/Greek
日本語/Japanese