Build a Sleek & Sortable Drag-and-Drop Kanban in React – No Hassle!

Leonard Ikeh — Mon, 17 Mar 2025 22:14:04 +0000

Creating a kanaban drag n drop component layout is actually more complicated than you'd think especially when trying to integrate with some kind of backend system (database).
One complication that immediately comes to mind is the nature of optimistic updates in a kanban drag drop layout, it is a little bit more complicated that a regular component that needs optimistic updates.

Let us use an example of a like button, when it gets clicked it is optimistically updated, if the asynchronous operation fails it reverts, if it is sucessfull it remains in the liked state.
Now lets look at a kanaban component board where we can have multiple columns and multiple column items in those columns, when column items are moved around or columns themselves are moved around they are optimistically updated until the completion of thier asynchronous tasks.

The main difference between the optimistic updates of this type of component vs something like a like button or any other optimistically updated components is the fact that the different updates of the columns and column items actually affect each other, when working with different optimistic component updates that affect each other this could end up leading to inconsistencies with the backend, bad UX and even UI errors.

Fortunatley I created a react hook that solves all these problems and in this tutorial i will show you how to easily use this hook to create your own component.

For this tutorial we will be using just 4 libraries:

react, for our frontend library
@hello-pangea/dnd as our DnD library
@wazza99/use-sortable, the hook I created for managing the sorting of the kanban board.
tailwind for basic styling (you do not actually have to use this you can use regular css)

Now lets move on to the interesting part, we will start by initializing our react project (with typescript) using vite.

npm create vite@latest

Of course run npm install, to install the needed dependencies.

Next we install the listed dependencies:

npm install @hello-pangea/dnd @wazza99/use-sortable tailwindcss @tailwindcss/vite

If you decide to use tailwind folow the tailwind instructions in order to configure it with vite: https://tailwindcss.com/docs/installation/using-vite

Next we create 3 component files in /src/components, create a Task.tsx,Column.tsx and Board.tsx
Also create a data.ts file in your src directory that looks something like this:

export default {
  columns: [
    {
      id: "column1",
      name: "Todo",
      order: 1,
      tasks: [
        {
          id: "1",
          title: "Task 1 title",
          order: 1,
        },
        {
          id: "2",
          title: "Task 2 title",
          order: 2,
        },
        {
          id: "3",
          title: "Task 3 title",
          order: 3,
        }, 
      ],
    },
    {
      id: "column2",
      name: "In Progress",
      order: 2,
      tasks: [
        {
          id: "4",
          title: "Task 4 title",
          order: 1,
        },
        {
          id: "5",
          title: "Task 5 title",
          order: 2,
        },
...
}

Follow the flow and fill the data with as much columns and tasks as you want. Note that all taskId's are unique regardless of distinct columns and the order is in ascending order for each column (this is very important!).

Add the following code to the Board.tsx

import { DragDropContext, Droppable } from "@hello-pangea/dnd";
import { useSortable } from "@wazza99/use-sortable";
import Column from "./Column";
import data from "../data";

const Board = () => {
  const { columns } = useSortable(data.columns, "tasks");
  return (
    <div>
      <DragDropContext onDragEnd={() => {}}>
        <Droppable
          droppableId="all-columns"
          direction="horizontal"
          type="column"
        >
          {(provided) => (
            <div
              className={`flex gap-2 px-4 my-6 w-full overflow-x-auto`}
              {...provided.droppableProps}
              ref={provided.innerRef}
            >
              {columns.map((column, index) => (
                <Column key={column.id} column={column} index={index} />
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
};

export default Board;

Explanation:

The <DragDropContext/> is used to create the overall context for drag n drop operations.
The <Droppable/> component creates an area where columns can be dropped. It is important you pass in those same props for the Droppable

Before we continue, create this file src/lib/utils.ts and install the following dependencies:

npm install clsx tailwind-merge

Then add the following code:

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

The cn() function will enable us to join tailwind classes dynamically.

Next in the Column.tsx, add the following:

import { Draggable, Droppable } from "@hello-pangea/dnd";
import Task from "./Task";
import { cn } from "../lib/utils";

type Props = {
  column: {
    id: string;
    name: string;
    order: number;
    tasks: {
      id: string;
      title: string;
      order: number;
    }[];
  };
  index: number;
};

const Column = ({ column, index }: Props) => {
  return (
    <Draggable draggableId={column.id} index={index}>
      {(provided) => (
        <div
          className="rounded-md border flex flex-col bg-white min-w-[15rem]"
          {...provided.draggableProps}
          ref={provided.innerRef}
        >
          <div className="flex items-center  gap-1 p-2">
            <span {...provided.dragHandleProps}>
              {/* grip to enable us drag the column */}
              <span className="inline-block h-4 w-4 bg-blue-500"></span>
            </span>
            <p>
              {column.name}: order {column.order}
            </p>
          </div>
          <Droppable droppableId={column.id} type="task">
            {(provided, snapshot) => (
              <div
                className={cn(
                  "space-y-3 p-2 min-h-24 grow",
                  snapshot.isDraggingOver ? "bg-emerald-300" : "bg-white"
                )}
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
                {column.tasks.map((task, index) => (
                  <Task key={task.id} task={task} index={index} />
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </div>
      )}
    </Draggable>
  );
};

export default Column;

Explanation:

The <Draggable/> component allows the column to be able to be dragged in its parent which we added in Board.tsx.
We create a span and pass in the draggableProps as well as a ref, this will enable ous have a handle (grip) to which we can drag columns from.
We add a <Droppable/> which will create a context to which we can drag and drop tasks.

Finally, we move unto the Task.tsx component. Add the following code:

import { Draggable } from "@hello-pangea/dnd";
import { cn } from "../lib/utils";

type Props = {
  task: {
    id: string;
    title: string;
    order: number;
  };
  index: number;
};

const Task = ({ task, index }: Props) => {
  return (
    <Draggable draggableId={task.id} index={index}>
      {(provided, snapshot) => (
        <div
          className={cn(
            "block p-2 text-white w-full transition-colors duration-500",
            snapshot.isDragging ? "bg-emerald-700" : "bg-neutral-800"
          )}
          {...provided.draggableProps}
          ref={provided.innerRef}
        >
          <div className="flex items-center  gap-1 ">
            <span {...provided.dragHandleProps}>
              <span className="inline-block h-4 w-4 bg-yellow-500"></span>
            </span>
            <p>
              {task.title}
              {", order: "}
              {task.order}
            </p>
          </div>
        </div>
      )}
    </Draggable>
  );
};

export default Task;

Explanantion:

We make the task draggable by using the <Draggable/> component.
We implement a handle grip the same way we did for Column in order to enable us drag a Task.

Right now we should have something that looks like this:

But, you should notice that although you can drag and drop both the Tasks and Columns, it does not stay in the exact order at which you dropped either the Task or Column, this is because we have not yet implemented the functionality for this.

Now back in the Board.tsx create the following function:

import { DragDropContext, Droppable, DropResult } from "@hello-pangea/dnd";

const { columns,dragEndHandler } = useSortable(data.columns, "tasks");

const handleDrag = (result: DropResult) => { 
    dragEndHandler(result, {
      reorderColumns: true,
      columnsDroppableId: "all-columns",
    });
  };

The dragEndHandler function which is provided by @wazza99/use-sortable will enable us implement sorting functionality to our board.

Now inject the function to the DragDropContext like this:

<DragDropContext onDragEnd={handleDrag}>
...
</DragDropContext>

Now if you test the application you will notice that your drag n drop actions actually take effect.

Optimistic Updates

Right now the board is working fine but, we a way to actually pass in asynchrounous functions to update the columns and tasks in the case that we are integrating with a backend.

Start by creating this function in src/lib/utils.ts:

export function createPromise<T>(data: T, duration: number): Promise<T> {
  return new Promise((resolve) => setTimeout(() => resolve(data), duration));
}

For this tutorial's sake this function will enable us to mimick an asynchronous operation.

In Board.tsx create the following functions:

import { OptimisticColumnData, OptimisticItemData, useSortable } from "@wazza99/use-sortable";
import { createPromise } from "../lib/utils";

const Board = () => {
  const { columns, dragEndHandler } = useSortable(data.columns, "tasks");

  async function updateTask(values: OptimisticItemData) {
    //values contain the current and old state of the optimistic data
    const data = await createPromise(values, 3000); 
//do something after promise is completed
  }

  async function updateColumn(values: OptimisticColumnData) {
    //values contain the current and old state of the optimistic data
    const data = await createPromise(values, 3000); 
//do something after promise is completed
  }

Now we inject these functions into the dragEndHandler() like so:

const handleDrag = (result: DropResult) => {
    dragEndHandler(result, {
      reorderColumns: true,
      columnsDroppableId: "all-columns",
    },{updateColumn:updateColumn,updateItem:updateTask});
  };

@wazza99/use-sortable also contain numerous functions which help in the management of your board state for example: addColumn,addColumnItem,deleteColumn... and so on, you can take a look at the docs here: docs.
You can also take a look at @hello-pangea/dnd to understand more about the library.

Congratulations you have just created a kanban board component that can be easily integrated with your backend system and maintain consistency.

DEV Community: Leonard Ikeh

Build a Sleek & Sortable Drag-and-Drop Kanban in React – No Hassle!

Optimistic Updates