react-beautiful-dnd vs @shopify/draggable vs @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll | Drag and Drop Libraries for React Comparison

Package	Downloads	Stars	Size	Issues	Publish	License

react-beautiful-dnd	1,845,291	33,790	1.39 MB	644	-	Apache-2.0
@shopify/draggable	86,312	18,212	653 kB	149	20 days ago	MIT
@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll	38,856	11,182	109 kB	70	15 days ago	Apache-2.0

Package

Downloads

Stars

Size

Issues

Publish

License

react-beautiful-dnd

1,845,291

33,790

1.39 MB

644

Apache-2.0

@shopify/draggable

86,312

18,212

653 kB

149

20 days ago

MIT

@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll

38,856

11,182

109 kB

15 days ago

Apache-2.0

Ease of Use

react-beautiful-dnd:
React Beautiful DnD is built with a focus on developer experience. It provides a clear and intuitive API that allows developers to create complex drag-and-drop interfaces with minimal effort. Its documentation is comprehensive, making it easy for newcomers to get started.
@shopify/draggable:
Shopify's draggable library is known for its simplicity and ease of integration. It provides a minimalistic API that allows developers to quickly set up drag-and-drop functionality without extensive configuration, making it a great choice for projects that require rapid development.
@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll:
This package is designed to be straightforward to implement, especially for developers familiar with Atlassian's design principles. It offers a clear API and integrates well with existing Atlassian components, making it easy to add drag-and-drop features to applications that already use Atlassian design.

Performance

react-beautiful-dnd:
React Beautiful DnD is built with performance in mind, utilizing techniques like virtualization to handle large lists efficiently. It ensures that only the necessary components re-render during drag-and-drop operations, which helps maintain a smooth user experience.
@shopify/draggable:
Shopify's draggable library is lightweight and designed for performance. It minimizes the overhead associated with drag-and-drop operations, ensuring that applications remain responsive even when handling multiple draggable elements simultaneously.
@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll:
This library is optimized for performance, particularly in scenarios involving large lists or complex drag-and-drop interactions. It uses efficient rendering techniques to minimize re-renders and ensure smooth dragging experiences, even with many items.

Accessibility

react-beautiful-dnd:
React Beautiful DnD places a strong emphasis on accessibility. It provides built-in support for keyboard navigation and screen readers, ensuring that drag-and-drop interactions are accessible to users with disabilities.
@shopify/draggable:
While primarily focused on performance and simplicity, Shopify's draggable library provides basic accessibility features. However, developers may need to implement additional accessibility enhancements to ensure full compliance with accessibility standards.
@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll:
This library includes features that enhance accessibility, allowing users to navigate and interact with drag-and-drop elements using keyboard controls. This is crucial for applications that aim to be inclusive and usable by all users.

Customization

react-beautiful-dnd:
React Beautiful DnD offers extensive customization options, allowing developers to control the look and feel of drag-and-drop elements. It provides hooks and props that enable fine-tuning of interactions, making it adaptable to various design requirements.
@shopify/draggable:
Shopify's draggable library is highly customizable, allowing developers to define their own drag-and-drop behaviors and styles. This flexibility makes it suitable for a wide range of applications, from simple lists to complex interfaces.
@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll:
This library allows for a moderate level of customization, enabling developers to tweak the appearance and behavior of drag-and-drop interactions to fit their application's design. However, it is somewhat opinionated towards Atlassian's design language.

Community and Support

react-beautiful-dnd:
React Beautiful DnD has a large and active community, with extensive documentation, tutorials, and resources available. This makes it easier for developers to find help and share knowledge, enhancing the overall development experience.
@shopify/draggable:
Shopify's draggable library has a growing community and is backed by Shopify's development team. While it may not have extensive documentation, the community is active and provides support through forums and GitHub.
@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll:
Being part of the Atlassian ecosystem, this package benefits from a dedicated user base and support channels, although it may not have as large a community as some other libraries.

⚠️ 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.

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!

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.