react-beautiful-dnd vs react-dnd vs react-draggable vs react-sortable-hoc vs sortablejs
Drag and Drop Libraries for React
Search packages..
react-beautiful-dndreact-dndreact-draggablereact-sortable-hocsortablejs

Drag and Drop Libraries for React

Drag and drop libraries for React provide developers with tools to implement drag-and-drop functionality in their applications. These libraries offer APIs and components that handle mouse and touch events, allowing users to drag items from one location and drop them into another. They are useful for creating interactive interfaces, such as sortable lists, draggable panels, and file upload areas. These libraries often come with features like customizable drag previews, keyboard accessibility, and support for touch devices, making them versatile for various use cases. They help enhance user experience by providing intuitive ways to manipulate content on the screen.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
react-beautiful-dnd034,0481.39 MB644-Apache-2.0
react-dnd021,637231 kB475-MIT
react-draggable09,295243 kB2138 months agoMIT
react-sortable-hoc010,901-2915 years agoMIT
sortablejs031,022640 kB51425 days agoMIT

Feature Comparison: react-beautiful-dnd vs react-dnd vs react-draggable vs react-sortable-hoc vs sortablejs

Complexity and Customization

  • react-beautiful-dnd:

    react-beautiful-dnd is designed for simplicity and ease of use, with a focus on providing a beautiful and accessible drag-and-drop experience out of the box. While it offers some customization options, it is not as flexible as react-dnd for complex use cases.

  • react-dnd:

    react-dnd is highly customizable and designed for complex drag-and-drop interactions. It provides a low-level API that allows developers to create highly specialized drag-and-drop experiences, making it suitable for applications that require detailed control over the behavior of draggable and droppable elements.

  • react-draggable:

    react-draggable is a lightweight library focused on making individual elements draggable. It provides basic customization options for drag behavior, such as constraints and handle elements, but it is not designed for complex drag-and-drop interactions or nested drag-and-drop functionality.

  • react-sortable-hoc:

    react-sortable-hoc is built for creating sortable lists and grids with minimal setup. It provides good customization options for sorting behavior, including the ability to customize the drag handle and drop animations, but it is primarily focused on sorting rather than general drag-and-drop functionality.

  • sortablejs:

    sortablejs is a lightweight and highly performant library for creating sortable lists and grids. It offers a range of customization options, including drag handles, animations, and event callbacks, making it flexible for various use cases while remaining easy to use.

Performance

  • react-beautiful-dnd:

    react-beautiful-dnd is optimized for performance, especially for lists and grids. However, it may experience performance issues with very large lists or highly nested drag-and-drop structures due to its focus on accessibility and visual fidelity.

  • react-dnd:

    react-dnd performance largely depends on how it is implemented. Since it is highly customizable, developers can optimize it for their specific use cases. However, its flexibility may introduce overhead if not used carefully, especially in complex drag-and-drop scenarios.

  • react-draggable:

    react-draggable is lightweight and has minimal impact on performance. It is ideal for applications that require simple dragging functionality without the overhead of a full drag-and-drop library.

  • react-sortable-hoc:

    react-sortable-hoc is designed to be performant, especially for sortable lists. It uses a virtual DOM approach to minimize re-renders during dragging, making it suitable for most use cases without significant performance drawbacks.

  • sortablejs:

    sortablejs is known for its high performance and low memory usage, making it one of the fastest libraries for creating sortable lists and grids. It is optimized for handling large lists and complex drag-and-drop interactions with minimal impact on performance.

Accessibility

  • react-beautiful-dnd:

    react-beautiful-dnd places a strong emphasis on accessibility, providing keyboard navigation and screen reader support out of the box. It follows WAI-ARIA guidelines to ensure that drag-and-drop interactions are accessible to all users, including those with disabilities.

  • react-dnd:

    react-dnd provides accessibility features, but it requires more manual implementation compared to react-beautiful-dnd. Developers need to ensure that their drag-and-drop interfaces are accessible by following best practices and using the provided APIs to manage keyboard interactions and aria attributes.

  • react-draggable:

    react-draggable offers basic accessibility features, but it is primarily focused on making elements draggable. Developers need to implement additional accessibility features, such as keyboard navigation and aria attributes, to make draggable elements fully accessible.

  • react-sortable-hoc:

    react-sortable-hoc provides good accessibility for sortable lists, but like react-dnd, it requires developers to implement some accessibility features manually. The library encourages best practices for accessibility, but it is not as comprehensive as react-beautiful-dnd in this regard.

  • sortablejs:

    sortablejs provides basic accessibility features, but it is up to the developer to ensure that sortable elements are fully accessible. The library does not provide built-in keyboard navigation or screen reader support, so additional work is needed to make it compliant with accessibility standards.

Ease of Use: Code Examples

  • react-beautiful-dnd:

    react-beautiful-dnd provides a simple and intuitive API for implementing drag-and-drop functionality. Its focus on accessibility and visual feedback makes it easy for developers to create user-friendly interfaces with minimal effort. The library’s documentation is thorough, providing clear examples and guidelines for implementation.

  • react-dnd:

    react-dnd has a steeper learning curve due to its flexibility and customization options. It requires a good understanding of the underlying concepts of drag-and-drop to use effectively. However, the documentation is comprehensive, and there are many examples available to help developers get started.

  • react-draggable:

    react-draggable is easy to use for simple dragging functionality. Its API is straightforward, and it requires minimal setup to make elements draggable. The documentation is clear, making it easy for developers to understand how to use the library quickly.

  • react-sortable-hoc:

    react-sortable-hoc is user-friendly for creating sortable lists. Its higher-order component approach simplifies the implementation of sortable functionality, and the documentation provides clear examples to guide developers through the process.

  • sortablejs:

    sortablejs is lightweight and easy to integrate into projects. Its simple API and minimal setup requirements make it accessible for developers. The documentation is well-structured, providing examples that help users understand how to implement sortable functionality quickly.

How to Choose: react-beautiful-dnd vs react-dnd vs react-draggable vs react-sortable-hoc vs sortablejs

  • react-beautiful-dnd:

    Choose react-beautiful-dnd if you need a simple, accessible, and visually appealing drag-and-drop solution for lists and grids. It is ideal for applications that require a straightforward implementation with good support for keyboard navigation and screen readers.

  • react-dnd:

    Choose react-dnd if you need a highly customizable and flexible drag-and-drop solution that supports complex interactions, including nested drag-and-drop, drag previews, and drop targets. It is suitable for applications that require fine-grained control over the drag-and-drop behavior and are willing to invest time in setting it up.

  • react-draggable:

    Choose react-draggable if you need a lightweight library for making individual elements draggable. It is perfect for applications that require simple dragging functionality without the overhead of a full drag-and-drop solution.

  • react-sortable-hoc:

    Choose react-sortable-hoc if you need to create sortable lists and grids with minimal setup. It is a higher-order component-based library that allows for easy implementation of sortable functionality while maintaining good performance and accessibility.

  • sortablejs:

    Choose sortablejs if you need a fast and lightweight library for creating sortable lists and grids with support for drag-and-drop, drag-and-sort, and multi-sort. It is highly performant and can be easily integrated into React applications, making it a great choice for projects that require minimal dependencies and high efficiency.

Similar Npm Packages to react-beautiful-dnd

react-beautiful-dnd is a popular library for implementing drag-and-drop functionality in React applications. It provides a simple and elegant API for creating beautiful and accessible drag-and-drop interfaces. With features like automatic scrolling, keyboard accessibility, and customizable animations, react-beautiful-dnd makes it easy for developers to enhance user experiences through intuitive drag-and-drop interactions. However, there are other libraries available that also offer drag-and-drop capabilities. Here are a few alternatives:

  • react-dnd is a powerful and flexible drag-and-drop library for React applications. It provides a more low-level API compared to react-beautiful-dnd, allowing for greater customization and control over the drag-and-drop interactions. react-dnd is particularly useful for complex use cases where you need to implement advanced drag-and-drop features, such as nested drag-and-drop contexts or custom drag previews. If your application requires a highly customizable drag-and-drop experience, react-dnd is a solid choice.
  • react-sortable-hoc is another library that focuses on creating sortable lists with drag-and-drop functionality. It is built on top of React's higher-order components and provides a straightforward API for creating sortable lists. react-sortable-hoc is particularly useful when you need to implement simple drag-and-drop sorting features without the overhead of a more complex library. If your primary goal is to create sortable lists with minimal setup, react-sortable-hoc is an excellent option.

To see how these libraries compare, check out the comparison: Comparing react-beautiful-dnd vs react-dnd vs react-sortable-hoc.

Similar Npm Packages to react-dnd

react-dnd is a powerful library for implementing drag-and-drop functionality in React applications. It provides a flexible and customizable API that allows developers to create complex drag-and-drop interfaces with ease. The library is built on top of the HTML5 drag-and-drop API and offers a higher-level abstraction that integrates seamlessly with React's component model. While react-dnd is a robust solution for drag-and-drop interactions, there are other libraries that serve as alternatives. Here are a few notable options:

  • react-beautiful-dnd is a popular library developed by Atlassian that focuses on providing a beautiful and accessible drag-and-drop experience. It is designed to be easy to use and integrates well with React's declarative nature. react-beautiful-dnd excels in creating lists and grids with smooth animations and a user-friendly interface. If you are looking for a straightforward solution to implement drag-and-drop functionality with a focus on aesthetics and accessibility, this library is an excellent choice.
  • react-sortable-hoc is another library that simplifies the process of creating sortable lists in React applications. It provides a higher-order component (HOC) that makes it easy to implement drag-and-drop sorting functionality. react-sortable-hoc is lightweight and offers a straightforward API, making it a good option for developers who need basic sorting capabilities without the overhead of more complex libraries. If your primary requirement is to create sortable lists with minimal setup, react-sortable-hoc is a solid option.

To explore how these libraries compare, check out the comparison: Comparing react-beautiful-dnd vs react-dnd vs react-sortable-hoc.

Similar Npm Packages to react-draggable

react-draggable is a popular library for creating draggable components in React applications. It provides a simple and flexible API to enable drag-and-drop functionality, allowing developers to easily implement draggable elements in their user interfaces. While react-draggable is a great choice for straightforward drag-and-drop needs, there are other libraries in the React ecosystem that offer alternative solutions. Here are a few notable alternatives:

  • react-beautiful-dnd is a powerful library designed specifically for creating beautiful and accessible drag-and-drop interfaces. It provides a higher-level abstraction over the drag-and-drop functionality, making it easier to implement complex drag-and-drop interactions, such as lists and grids. With features like automatic scrolling, keyboard accessibility, and customizable animations, react-beautiful-dnd is an excellent choice for applications that require a polished and user-friendly drag-and-drop experience.
  • react-dnd is another robust library for implementing drag-and-drop functionality in React applications. It offers a more flexible and customizable approach compared to react-draggable, allowing developers to create complex drag-and-drop interactions. With its powerful API, react-dnd supports various drag-and-drop scenarios, including dragging between different lists, custom drag previews, and more. If your application requires advanced drag-and-drop capabilities, react-dnd is a strong contender.
  • react-draggable is the same library mentioned at the beginning, emphasizing its simplicity and ease of use for basic dragging needs. It is particularly well-suited for scenarios where you need to make individual elements draggable without the overhead of more complex drag-and-drop libraries.

To see how these libraries compare, check out the comparison: Comparing react-beautiful-dnd vs react-dnd vs react-draggable.

Similar Npm Packages to react-sortable-hoc

react-sortable-hoc is a higher-order component library for creating sortable lists in React applications. It provides a simple and flexible way to implement drag-and-drop functionality, allowing users to reorder items in a list or grid with ease. With its intuitive API, react-sortable-hoc enables developers to create interactive and user-friendly interfaces without much hassle. However, there are other libraries in the React ecosystem that also provide drag-and-drop capabilities. Here are a few alternatives:

  • react-beautiful-dnd is a powerful and flexible library for implementing drag-and-drop functionality in React applications. It is built by Atlassian and focuses on providing a beautiful and accessible user experience. react-beautiful-dnd supports complex drag-and-drop interactions, including nested lists and dynamic content. If you need a robust solution with advanced features like keyboard accessibility, animations, and customizable styles, react-beautiful-dnd is an excellent choice for your project.
  • react-dnd is another popular library for implementing drag-and-drop functionality in React applications. It provides a set of higher-order components and hooks that allow developers to create complex drag-and-drop interfaces. react-dnd is highly customizable and supports various drag-and-drop scenarios, making it suitable for applications that require more control over the drag-and-drop behavior. If your project demands a flexible and powerful solution for drag-and-drop interactions, react-dnd is worth considering.

To see how react-sortable-hoc compares with react-beautiful-dnd and react-dnd, check out the comparison: Comparing react-beautiful-dnd vs react-dnd vs react-sortable-hoc.

Similar Npm Packages to sortablejs

sortablejs is a popular library for creating sortable lists and grids using drag-and-drop functionality. It is lightweight and provides a simple API to enable users to reorder items in a list or grid with ease. sortablejs is highly customizable and works well with various frameworks, including React, Vue, and Angular. Its flexibility and performance make it a great choice for developers looking to implement drag-and-drop features in their applications.

While sortablejs is a powerful option, there are other libraries in the React ecosystem that provide similar functionalities. Here are a few alternatives:

  • react-beautiful-dnd is a library developed by Atlassian that provides a beautiful and accessible drag-and-drop experience for lists in React applications. It focuses on providing a smooth user experience and is built with accessibility in mind. react-beautiful-dnd allows developers to create complex drag-and-drop interfaces with minimal effort, making it ideal for applications that require a polished and user-friendly design.
  • react-sortable-hoc is another library that enables drag-and-drop sorting for React components. It is built on top of the react and react-dom libraries and provides a higher-order component (HOC) approach to creating sortable lists. react-sortable-hoc is easy to integrate into existing React applications and offers a straightforward API for implementing drag-and-drop functionality. It is a good choice for developers who prefer a HOC pattern and need a simple solution for sortable lists.

To see how sortablejs compares with react-beautiful-dnd and react-sortable-hoc, check out the comparison: Comparing react-beautiful-dnd vs react-sortable-hoc vs sortablejs.

README for react-beautiful-dnd

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

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.