When it comes to building out React JS applications, one of the more challenging (but also popular) features I'm asked to build is the ability to drag and drop elements on a page.
React has some great libraries for this exact feature and I wanted to list out the two ones that I use on a regular basis: React Beautiful DND and React Sortable HOC.
Why do I use two libraries for the same drag and drop functionality? The reason is related to the type of page elements that I'm working with.
React Beautiful DND is probably the most popular components in the React ecosystem for building drag and drop features. It also has great documentation with plenty of examples that you can use in your codebase. It also works great when you're required to implement the ability to drag and drop between multiple types of lists (e.g. sites like Trello). It is also maintained by Atlassian, so it has solid support and is updated regularly.
However, I've ran into issues with React Beautiful DND when it comes to working with grid based data.
For example, React Beautiful DND works great for dragging and dropping with lists like the one below:
However, for lists that use tools such as Flexbox, with dynamic layouts, React Beautiful DND can be challenging to work with. An example is below:
Thankfully, the React Sortable HOC works perfectly in this type of situation. The implementation for React Sortable HOC is a little more advanced than Beautiful DND, however, it gives you more control over the drag and drop process and can work with dynamic layouts such as required by image galleries. React Sortable HOC also has a great set of examples that you can follow in their documentation.
One rule of thumb I follow is to always wrap the list and item components up in a provider/context so that the data, API calls, and resorting can be managed explictly.
So if you're looking to build out drag and drop features in a React app, I definitely recommend checking out these libraries.