React Drag and Drop libraries, What should you choose?
Hello everyone, a few weeks back I had to implement a dashboard page that should have draggable widgets. So the primary requirement was to implement a drag and drop ability to existing React components. This article is about the solutions which I have found during my research. By reading this article, you’ll be able to choose the most suitable Drag and Drop (DnD) library for your use case.
When it comes to React.js there is no inbuilt module or component which supports DnD. It makes sense as React is just a library. First of all, let’s see what DnD is.
What is DnD?
Basically, DnD means changing the DOM element’s position by dragging it to a new position. There are several ways to input the drag signals, the methods we are going to consider are,
1.Mouse input
2.Touch input
2. KeyBoard input
The DnD process can be described in the following steps.
— Drag Start
- Keep the start position of the drag started element.
— Drop
- When the user drops the element in a new position. We can calculate the difference in the cursor movement. (delta)
- Then calculate the new position of the element using the start position and the current cursor position.
- Then set new position values to the DOM element.
So this is the drag and drop process that you need to consider when you implement Dnd in your web app. Yeah, It’s a pretty complex task to handle. Luckily there are several libraries out here to support us in this case.
Actually, do we need an additional library?
Of course yes, the answer is that the drag and drop computation is pretty complex and It should be a smooth experience for the user. But if your requirement is so simple you can implement it on your own (Check out this very simple example provided by W3Schools).
What are the libraries available?
These are the main libraries I have found. All of these libraries provide their own ways to solve the DnD problem.
Next, we are going to discuss a very high-level overview of each library. The description mainly contains a
1.Example/demo provided by the respective library authors.
2.Supported input methods
3.The best use case of the respective library.
react-beautiful-dnd
Storybook — https://react-beautiful-dnd.netlify.app/?path=/story/single-vertical-list--basic
Supported Input Methods — Mouse, Keyboard, Touch
Good for — Unidirectional draggable components
This one is from Atlassian, yeah those who manage the “Jira”. Using react-beautiful-dnd you can create draggable lists. If your requirement is a unidirectional draggable component (list, table) and you have a huge amount of draggable items I strongly suggest this.
You can easily create verticle and horizontal lists and move draggable components between them.
But if you’re looking for a grid layout supported library, react-beautiful-dnd don't provide official support for that.
react-dnd
Supported Input Methods — Mouse, Touch
Good for — Native HTML DnD API support
React dnd uses the native HTML5 drag and drop API under the hood. React-dnd core does not manipulate the DOM or any UI part. It keeps the track of your draggable component’s data, like x/y coordinates, component type etc... So it’s like a state management library made for draggable components.
Their doc says,
Some of these concepts resemble the Flux and Redux architectures.
This is not a coincidence, as React DnD uses Redux internally.
🥶Redux? Don’t worry there is no Redux complexity exposed to the outside. The UI interaction part was implemented in a pluggable manner. The library which was responsible for the UI interaction is called HTML backend. So if you are going to use this library you need to install their HTML backend node package separately. They provide two HTML backends,
- React-dnd-html5-backend — provides the normal DnD interactions
For web browser. This doesn’t support touch inputs.
- React-dnd-touch-backend — this is to support the touch inputs.
The HTML5 backend does not support the touch events. So it will not work on a tablet and mobile devices. You can use the react-dnd-touch-backend for touch devices.
If you require to handle file drag and drop from the OS go for this. Because to handle the “file drops” you need to use a library that supports HTML5 drag-drop API. When it comes to the documentation they have provided pretty good documentation and explained the pros and cons of the library.
react- draggable
Example— http://react-grid-layout.github.io/react-draggable/example/
Supported Input Methods — Mouse, Touch
Good for —single drag area.
This is a pretty simplified library that helps you to create draggable components by just wrapping your component from their Draggable component.
This has pretty much every feature you need to implement a simple draggable component. Supports touch input, Also you can implement grid layout by just passing grid prop to the Draggable component.
The downside of this library is, it mutates the DOM on every position change of your draggable component. Therefore this is not ideal for list/table implementations. Another thing is their documentation is not quite good enough. However, they have provided this demo app which contains almost every use case of their draggable component. If you require to be able to drag some widgets around I would suggest this one.
react-dnd-kit (beta — 6/27/2021)
Supported Input Methods— Mouse, Touch, Keyboard
Good for — all DnD use cases except HTML-native-DnD API features
This library contains almost every feature in the above libraries. It is a zero-dependent, feature-rich dnd library that is almost similar to React-dnd. But dnd-kit doesn’t use HTML 5 API. Therefore If you require support drags from another window or from the desktop you won’t be able to achieve that. Otherwise, Dnd-kit is a pretty good lightweight solution.
react-dnd-kit is still in the beta channel( 6/27/2021)
The above-mentioned libraries have their own use cases. Please make sure to read the overview of the library documentation before you are going to implement that. Hope this article helped you.❤
