Monthly Downloads: 0
Programming language: JavaScript
Latest version: v12.0.0

react-beautiful-dnd alternatives and similar libraries

Based on the "Drag and Drop" category

Do you think we are missing an alternative of react-beautiful-dnd or a related project?

Add another 'Drag and Drop' Library



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.


Currently supported feature set βœ…

  • Vertical lists ↕
  • Horizontal lists ↔
  • Movement between lists (β–€ ↔ β–€)
  • 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
  • Compatible with ReactDOM.createPortal - portal pattern
  • 🌲 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 πŸ‹οΈβ€


Guides πŸ—Ί

Patterns πŸ‘·β€

Support πŸ‘©β€βš•οΈ

Read this in other languages 🌎

Author ✍️

Alex Reardon @alexandereardon

Collaborators 🀝