Tentacle Labs Blog

react-beautiful-dnd is a great package for building complex drag and drop behaviors of lists. If you want to reorder the items in a list or move them between lists, this is the go-to package. But the package has a problem: Atlassian has limited its maintenance to security fixes.

Looking at the numbers, react-beautiful-dnd is quite popular, with over a million downloads a week. The downloads even have a positive trend. This is unexpected for a package that isn’t under active development. Sadly, Atlassian decided to move the project into maintenance mode, with the plan to only fix security related issues. Atlassian will have its reasons, maybe that the creator isn’t part of the maintainer team anymore. The good thing is that they clearly communicate it with a warning in the README on GitHub. But as there was no new release, the warning wasn’t published to NPM. That is probably the reason that many people miss this problem and still rely on the package.

There is a good reason for the package to be that popular. It provides a very good level of abstraction to the problem it solves. You can get started pretty simple. There aren't a lot of concepts to learn: You have a <DragDropContext> that takes care of the event handling, a <Droppable> which is a container for <Draggable> list items. Once you have wrapped your code in these containers and implemented your state handling, you are done. It has no opinionated styling and you have pretty results quickly. You forgot something or made a mistake? The library has checks during development mode to warn you if you did something wrong. You might run into the one or the other special case, or want to make it even cooler? The extensive documentation has all of that covered: Want nested list? They have a page on it. Want to change animations? They have a page on it. You need to be accessible? They have a page on it (But actually, it just works 😉​). They even have free courses on the library in case you don’t want to crawl through the documentation or the long list of examples. There is a big community around the package, on GitHub or StackOverflow, that can answer questions. The learning curve of the package is nearly perfect!

It gets a bit more difficult once you try to do more complicated things. In our last project we ran into some issues that limit the products we are building with the package. Some issues we run into:

• It’s difficult to do more complex styling, like styling the placeholder when dragging over a list.
• The details about the current state are limited, you don’t have a way identify situations where an item is dragged over the source list. Or it isn’t easy to access the state or lifecycle hooks of other drag operations.
• While the package has good accessibility, it has problems with corner cases: We wanted to create a grid of multiple drop targets, however, keyboard navigation only works horizontal or vertical, but not in both directions at once.

The locked down design, which brings a nice developer experience for simple cases, makes it hard to implement these features around the package. The only option is to implement the features inside of it, the project has to evolve. We could implement these features on our own, but it’s pointless if there isn’t a chance that they are merged back into upstream.

With the recent release of React 18 is another nail into the coffin of react-beautiful-dnd. Support for React 18 can only be established if someone updates the project, which is unlikely to happen in the current situation.

It’s a great project, but in the end it all comes back to the lack of maintenance of the project. If this doesn’t change it will be a very long and slow death. That makes the situation around react-beautiful-dnd quite ugly. What can we do to help here? There seems to be some actions by the community. They created a fork called @react-forked/dnd. The time will show whether the project can keep up with the demand. Or is it time for a cultural shift to more open-source projects that have a stable financial founding?

Let’s hope that the situation improves or that the fork or another alternative gets into place. Till then we can limit our expectations and live with fewer features. Or we start to implement the features on our own, using low level libraries like react-dnd. For new projects you should definitely go with a different package – always remember to choose your dependency carefully.