Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
React Beautiful Dnd | 30,958 | 992 | 1,388 | 10 hours ago | 94 | August 30, 2022 | 594 | other | JavaScript | |
Beautiful and accessible drag and drop for lists with React | ||||||||||
Appsmith | 29,186 | 12 hours ago | 1 | October 13, 2021 | 3,639 | apache-2.0 | TypeScript | |||
Platform to build admin panels, internal tools, and dashboards. Integrates with 15+ databases and any API. | ||||||||||
React Dnd | 19,705 | 7,358 | 3,186 | 6 days ago | 140 | April 19, 2022 | 410 | mit | TypeScript | |
Drag and Drop for React | ||||||||||
React Grid Layout | 18,338 | 877 | 454 | 4 days ago | 109 | February 21, 2022 | 140 | mit | JavaScript | |
A draggable and resizable grid layout with responsive breakpoints, for React. | ||||||||||
React Sortable Hoc | 10,537 | 3,669 | 1,113 | 14 days ago | 75 | March 19, 2021 | 288 | mit | JavaScript | |
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️ | ||||||||||
React Dropzone | 9,903 | 5,158 | 2,503 | 6 days ago | 176 | October 12, 2022 | 71 | mit | JavaScript | |
Simple HTML5 drag-drop zone with React.js. | ||||||||||
Dnd Kit | 9,032 | 351 | a day ago | 125 | February 19, 2023 | 322 | mit | TypeScript | ||
The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React. | ||||||||||
Use Gesture | 8,137 | 50 | 244 | 11 days ago | 173 | March 07, 2021 | 18 | mit | TypeScript | |
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript. | ||||||||||
React Diagrams | 7,959 | 7 | 24 | 3 days ago | 35 | March 05, 2023 | 308 | mit | TypeScript | |
a super simple, no-nonsense diagramming library written in react that just works | ||||||||||
H5 Dooring | 7,298 | 7 months ago | 29 | gpl-3.0 | JavaScript | |||||
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台. |
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 around
resetServerContext()
- Utility for server side rendering (SSR)
<DragDropContext />
responders - onDragStart
, onDragUpdate
, onDragEnd
and onBeforeDragStart
<Draggable />
sinnerRef
draggableId
and droppableId
sdoctype
TypeScript
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 portal
Alex Reardon @alexandereardon
Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.