Implement drag and drop feature in React JS using dnd-kit library
Hi everyone, today i will make guide on how to implement drag and drop feature in React JS using dnd-kit library.
dnd-kit is a React JS library that used to building drag and drop interfaces . dnd-kit has a lot of advantages to offer such as easy-to-use and performance stability. (https://dndkit.com)
In this guide i will show you how to create and implement basic drag and drop interface in React JS using dnd-kit. In this example, i will be creating a simple fruit-cart app. User can add a fruit to the cart by simply dragging and dropping it to cart area.
In this project, i will use following technologies :
- React JS for UI library
- Typescript for language
- CSS Modules for styling
- dnd-kit to implement drag and drop feature
Let’s begin the guide. First, make sure you have already initialized a new or already have current React JS project.
I already initialized a new empty React JS project for this guide with following files structure :
Next, i will add initial fruits data on App.tsx and add basic view for displaying all fruits item in a list to select later and also display cart section along with its box.
After creating that basic view, we can start implement the drag and drop feature using dnd-kit library.
First, you need to install dnd-kit library in project using package manager with command :
npm install @dnd-kit/core
Then you need to add DndContext component to cover all your other components that needs to implement drag and drop feature (In this case, all components in App.tsx). DndContext allows your draggable components and droppable container to interact with each other.
Next, we can create a Droppable component. Droppable used as a container and space to detect when the other component has been dragged in. Droppable component also used to display selected data based on what has been dropped in.
To create Droppable component, we can use useDroppable hook. It requires an unique id (can be any string) to identify it from another droppable. It also returns a function (setNodeRef) to set the component to become Droppable.
In this case, i will create another component (CartDroppable) to set as a Droppable using useDroppable hook. It also receive an array of string as a props to display the cart items that has been selected.
Then we can import and implement it in App.tsx. I also create a state to hold all the selected cart items and then pass it as a prop to CartDroppable component to later display it.
After that we can start creating Draggable component. Draggable act as an object to drag and drop. We can create it using useDraggable hook.
Same with useDroppable, useDraggable hook also require an unique id (can be any string) to identify it from another Draggable. It also can store data in its data property to used it later in the app.
useDraggable hook returns many thing such as attributes, listeners, setNodeRef, and transform. Attributes, listeners and setNodeRef is passed to a component to set it as a Draggable. Transform is used to provide information about draggable when it is being moved. We can use CSS utility function provided by dnd-kit library to convert the Transform data to string (as transform css property value) and then use it to style the Draggable component (so it can be moved around because of transform css property).
In this case, I will create a component named FruitDraggable to act as an Draggable. I also set the data to store the fruit item name to used it later. I set up the FruitDraggable based on the information above that i’ve been explained.
Next, we can import it in App.tsx and create it with fruit item data. It then can be selected and dragged around.
Finally we can implement drag and drop feature using onDragEnd event. onDragEnd is one of many event provided in DndContext component that runs when a Draggable is being dropped inside a Droppable. We can use it to change the items inside droppable when a draggable is being dropped in.
In this case, i will create a function to add selected fruit to the cart when onDragEnd event fires. It also will updated the cart items state and when it updated, the CartDroppable items display will also be updated.
And that’s it. We successfully implement the drag and drop feature in React JS using dnd-kit library by creating this simple fruit-cart app.
You can view the full source code in my Github repository : https://github.com/WawanC/react-dnd-kit-basic
Thank you for reading and you can follow me to read another post about React JS.
