Thanks for reaching out Dimitar Nestorov. As you can imagine we cannot go into everything in a blog. We could have written another blog which purely compared the library to each library out there! However, seeing that react-sortable-hoc has a lot of similarities to react-beautiful-dnd I will compare the two libraries here.

Lets begin

react-sortable-hoc is a super well done library 🎉. It is shares some design ideas withreact-beautiful-dnd. A this early stage it can be difficult to tell the two libraries apart. However, there will be significant feature differences in the coming months. Remember, react-beautiful-dnd has not even been released for a week at this point!

Design

At a design level it is great to see that both libraries employ a similar visual experience while dragging for the user. It is not unique to have things move out of the way by animation when sorting lists in software. I think react-beautiful-dnd goes a few steps further in this refinement as described in the original blog.

Feature differences

Both libraries support reordering within a single list.react-sortable-hoc is a more mature library and delivers extremely well on its value proposition of enabling you to

turn any list into an animated, touch-friendly, sortable list

react-sortable-hoc also has great support for virtualised lists and touch events.

Here is some of the features we are planning on adding to react-beautiful-dnd soon:

Transitioning between lists

react-beautiful-dnd will support moving a draggable item from one list to another. This will enable some really interesting drag and drop experiences: such as building a ‘board’ implementation.

State driven dragging

All dragging in react-beautiful-dnd is controlled by state. User input only updates the state which results in rendering the UI in a new way. Technically any user input, or programatic input could produce a drag. This allows for some interesting and exciting possibilities. Here are some off the top of my head:

• voice controlled dragging
• replaying dragging in some form of report
• view other users dragging on your interface
• undo functionality which actually reverses a real drag

Multi drag

react-beautiful-dnd is planning on building support for dragging multiple items at a time and transitioning them together

Keyboard first

Something react-beautiful-dnd tries to do is keep keyboard as a first class citizen. Currently react-sortable-hocdoes not support keyboard dragging

Interactive elements

react-beautiful-dnd works really hard to ensure that it works correctly with other interactive elements such as anchors (see click blocking section in original blog)

Touch

While not currently supported — we are planning on adding support for touch dragging soon. We had to start somewhere, and we thought launching with a great mouse and keyboard story was a good initial milestone to hit.

Other differences

There are also a number of other differences between the two libraries such as api design, design philosophy and implementation mechanics.

From an engineering health perspective, react-beautiful-dnd is tested extremely heavily to ensure everything works as expected even as we add more features, while react-sortable-hoc has no tests that I can see. react-beautiful-dnd is also a typed codebase which provides it with a greater assurance of stability as it moves forward.

Super high level

At a super high level you could see the differences between the two as:

react-sortable-hoc is concerned with turning ‘any list into an animated, touch-friendly, sortable list’

react-beautiful-dnd will support a range of drag and drop behaviours for multiple lists — and all of them will be beautiful.

Cheers