Drag and Drop Your React Component

Hi, I want to share how we can drag and drop components in React like Kanban Board in Jira.

I created a small app, called todo-app with a drag n drop feature

in this app, we don’t connect to any API or database. We only use :

1. Material UI Framework for Component ( Google Standard )
2. Redux Saga for State Management
3. react-beautiful-dnd for Drag n Drop

Why do we use react-beautiful-dnd for Drag n Drop?

1. This library is owned by Atlassian — Jira that we always use haha…
2. It’s simple and easy to use

Please refer to the doc in this link: https://github.com/atlassian/react-beautiful-dnd

The image is taken from https://github.com/atlassian/react-beautiful-dnd

How we can implement this into our todo-apps?

1. On the Main Page List, we import “DragDrop Context” and “Droppable”

2. Remember, before we render “todo cards”, we must use React Memo, because it’s a heavy component and we can prevent it from useless re-renderings

3. Last, we can use “Draggable” to drag and drop our card… yey!!

Pretty Simple and easy right? Let me show the final result :

todo apps

if you want to explore more about this, I shared with you this project :

GitHub - candraaji/playground_todolist

if you only want to try, you can use this: https://demo-todoapp.candraaji.com/

Happy Coding !!!