React Beautiful Dnd

Beautiful and accessible drag and drop for lists with React
Alternatives To React Beautiful Dnd
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Beautiful Dnd30,9589921,38810 hours ago94August 30, 2022594otherJavaScript
Beautiful and accessible drag and drop for lists with React
Appsmith29,186
12 hours ago1October 13, 20213,639apache-2.0TypeScript
Platform to build admin panels, internal tools, and dashboards. Integrates with 15+ databases and any API.
React Dnd19,7057,3583,1866 days ago140April 19, 2022410mitTypeScript
Drag and Drop for React
React Grid Layout18,3388774544 days ago109February 21, 2022140mitJavaScript
A draggable and resizable grid layout with responsive breakpoints, for React.
React Sortable Hoc10,5373,6691,11314 days ago75March 19, 2021288mitJavaScript
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
React Dropzone9,9035,1582,5036 days ago176October 12, 202271mitJavaScript
Simple HTML5 drag-drop zone with React.js.
Dnd Kit9,032351a day ago125February 19, 2023322mitTypeScript
The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Use Gesture8,1375024411 days ago173March 07, 202118mitTypeScript
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
React Diagrams7,9597243 days ago35March 05, 2023308mitTypeScript
a super simple, no-nonsense diagramming library written in react that just works
H5 Dooring7,298
7 months ago29gpl-3.0JavaScript
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
Alternatives To React Beautiful Dnd
Select To Compare


Alternative Project Comparisons
Readme

⚠️ Maintenance & support

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.


react beautiful dnd logo

react-beautiful-dnd (rbd)

Beautiful and accessible drag and drop for lists with React

CircleCI branch npm

quote application example

Play with this example if you want!

Core characteristics

  • Beautiful and natural movement of items 💐
  • Accessible: powerful keyboard and screen reader support ♿️
  • Extremely performant 🚀
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started 👩‍🏫

We have created a free course on egghead.io 🥚 to help you get started with react-beautiful-dnd as quickly as possible.

course-logo

Currently supported feature set ✅

  • Vertical lists ↕
  • Horizontal lists ↔
  • Movement between lists (▤ ↔ ▤)
  • Virtual list support 👾 - unlocking 10,000 items @ 60fps
  • Combining items
  • Mouse 🐭, keyboard 🎹♿️ and touch 👉📱 (mobile, tablet and so on) support
  • Multi drag support
  • Incredible screen reader support ♿️ - we provide an amazing experience for english screen readers out of the box 📦. We also provide complete customisation control and internationalisation support for those who need it 💖
  • Conditional dragging and conditional dropping
  • Multiple independent lists on the one page
  • Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
  • Add and remove items during a drag
  • Compatible with semantic <table> reordering - table pattern
  • Auto scrolling - automatically scroll containers and the window as required during a drag (even with keyboard 🔥)
  • Custom drag handles - you can drag a whole item by just a part of it
  • Able to move the dragging item to another element while dragging (clone, portal) - Reparenting your <Draggable />
  • Create scripted drag and drop experiences 🎮
  • Allows extensions to support for any input type you like 🕹
  • 🌲 Tree support through the @atlaskit/tree package
  • A <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)
  • Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
  • Server side rendering (SSR) compatible - see resetServerContext()
  • Plays well with nested interactive elements by default

Motivation 🤔

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:

Not for everyone ✌️

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.

Documentation 📖

About 👋

Sensors 🔉

The ways in which somebody can start and control a drag

API 🏋️‍

diagram

Guides 🗺

Patterns 👷‍

Support 👩‍⚕️

Read this in other languages 🌎

Creator ✍️

Alex Reardon @alexandereardon

Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.

Maintainers

Collaborators 🤝

Popular Drag And Drop Projects
Popular Reactjs Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Reactjs
Drag And Drop
Reader
Accessibility
Sortable