react-beautiful-dnd vs react-dnd vs react-sortable-hoc
React Drag-and-Drop Libraries
Search packages..
react-beautiful-dndreact-dndreact-sortable-hoc

React Drag-and-Drop Libraries

Drag-and-drop libraries in React provide developers with the tools to create interactive user interfaces that allow users to move items around within a UI. These libraries simplify the implementation of drag-and-drop functionality, enabling features like reordering lists, moving items between containers, and creating complex drag-and-drop interactions. Each library has its own approach and features, catering to different use cases and developer preferences. Note that react-beautiful-dnd is now deprecated and no longer maintained, so developers may want to consider alternatives like react-dnd or react-sortable-hoc for long-term projects.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
react-beautiful-dnd034,0511.39 MB644-Apache-2.0
react-dnd021,637231 kB475-MIT
react-sortable-hoc010,903-2915 years agoMIT

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

Ease of Use

  • react-beautiful-dnd:

    react-beautiful-dnd is designed to be easy to use, with a simple API that allows developers to quickly implement drag-and-drop functionality. It provides built-in styles and animations, making it visually appealing without requiring extensive customization. However, react-beautiful-dnd is now deprecated, so it may not be the best option for new projects.

  • react-dnd:

    react-dnd has a steeper learning curve due to its lower-level API. It requires a deeper understanding of how drag-and-drop works in React, which can be beneficial for complex use cases but may be overwhelming for beginners.

  • react-sortable-hoc:

    react-sortable-hoc is user-friendly and allows developers to create sortable lists with minimal configuration. Its higher-order component approach makes it easy to integrate into existing components.

Customization

  • react-beautiful-dnd:

    While react-beautiful-dnd offers some customization options, it is primarily focused on providing a consistent and accessible experience out of the box. Developers can customize styles and behaviors, but it may not be as flexible for unique use cases. Since it is now deprecated, it is recommended to look for more flexible alternatives like react-dnd.

  • react-dnd:

    react-dnd excels in customization, allowing developers to define their own drag-and-drop behavior and interactions. It provides hooks and utilities to create highly tailored experiences, making it suitable for complex applications.

  • react-sortable-hoc:

    react-sortable-hoc offers customization primarily for sorting behavior. Developers can easily customize the appearance and behavior of sortable items, but it may not provide the same level of flexibility as react-dnd for complex interactions.

Performance

  • react-beautiful-dnd:

    react-beautiful-dnd is optimized for performance, especially with large lists. It uses a virtualized approach to minimize re-renders and improve responsiveness, ensuring smooth drag-and-drop interactions even with many items. However, since it is now deprecated, developers should consider alternative libraries for long-term performance optimizations.

  • react-dnd:

    react-dnd can handle complex drag-and-drop interactions efficiently, but performance may vary depending on the implementation. Developers need to be mindful of performance optimizations, especially in large applications.

  • react-sortable-hoc:

    react-sortable-hoc is generally performant for sortable lists, but performance can degrade with a very large number of items. Developers should consider optimizations like memoization to enhance 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. This makes it a great choice for applications that prioritize inclusivity. However, as it is now deprecated, developers should be aware that it may not receive future updates or support.

  • react-dnd:

    react-dnd does not focus heavily on accessibility by default, so developers may need to implement their own accessibility features. This can be a drawback for applications that require strong accessibility support.

  • react-sortable-hoc:

    react-sortable-hoc does not provide built-in accessibility features, so developers will need to add their own support for keyboard navigation and screen readers.

Community and Support

  • react-beautiful-dnd:

    react-beautiful-dnd has a strong community and is well-documented, making it easy to find resources and support. Its popularity ensures that developers can find solutions to common issues quickly. However, since it is deprecated, support may be limited in the future, and the community may shift to alternative libraries like react-dnd or react-sortable-hoc.

  • react-dnd:

    react-dnd also has a robust community and extensive documentation, which is beneficial for developers looking to implement complex drag-and-drop features. However, its complexity may lead to a steeper learning curve for newcomers.

  • react-sortable-hoc:

    react-sortable-hoc has a smaller community compared to the other two libraries, but it is still well-documented. Developers may find fewer resources and examples, which could impact the learning process.

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

  • react-beautiful-dnd:

    Choose react-beautiful-dnd if you need a simple and visually appealing drag-and-drop experience, especially for lists and grids. It is highly focused on accessibility and provides a straightforward API for implementing drag-and-drop interactions with minimal setup. However, please note that react-beautiful-dnd is now deprecated, and developers are encouraged to consider alternative libraries for future projects.

  • react-dnd:

    Choose react-dnd if you require a more flexible and customizable drag-and-drop solution. It is suitable for complex drag-and-drop scenarios, such as dragging items between different types of containers or implementing advanced interactions. It provides a lower-level API that allows for greater control over the drag-and-drop behavior.

  • react-sortable-hoc:

    Choose react-sortable-hoc if your primary need is for sortable lists. It is built on top of React's higher-order components and provides a simple way to create sortable lists with minimal boilerplate. It is ideal for scenarios where you want to reorder items within a list.

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

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.