Kanban Board React

A simple package for creating lanes and tasks. Tasks can be dragged and dropped into lanes. The package uses zero dependencies.

If you experience any problems, please open an issue here: https://github.com/thorep/kanban-board-react/issues

Usage

import { Board, Lane } from "kanban-board-react";
import React, { useState } from "react";
import "./App.css";

const tasksData: any[] = [
    { someData: "test", someData2: "test", dataKey: "todo", id: 1 },
    { someData: "test", someData2: "test", dataKey: "complete", id: 2 },
    { someData: "test", someData2: "test", dataKey: "doing", id: 3 },
    { someData: "test", someData2: "test", dataKey: "qa", id: 4 },
    { someData: "test", someData2: "test", dataKey: "todo", id: 5 },
];

function App() {
    const [items, setItems] = useState<any[]>(tasksData);

    const updateTask = (result: { task: any; columnDataKey: string }) => {
        const index = items.findIndex((item) => item.id === result.task.id);
        items[index].dataKey = result.columnDataKey;
        const newArray = [...items];
        setItems(newArray);
    };
    return (
     <div style={{ marginTop: "10px" }}>
         <Board tasks={items} updateTask={updateTask}>
          <div style={boardStyle}>
             <Lane
                 style={laneStyle}
                 title={"Todo"}
                 dataKey={"todo"}
                 onDragOverStyle={onDragOverStyle}
             >
                 {(task: any) => {
                     return <Task task={task} />;
                 }}
             </Lane>
             <Lane
                 style={laneStyle}
                 title={"Doing"}
                 dataKey={"doing"}
                 onDragOverStyle={onDragOverStyle}
             >
                 {(task: any) => {
                     return <Task task={task} />;
                 }}
             </Lane>
             <Lane
                 style={laneStyle}
                 title={"QA"}
                 dataKey={"qa"}
                 onDragOverStyle={onDragOverStyle}
             >
                 {(task: any) => {
                     return <Task task={task} />;
                 }}
             </Lane>
             <Lane
                 style={laneStyle}
                 title={"Complete"}
                 dataKey={"complete"}
                 onDragOverStyle={onDragOverStyle}
             >
                 {(task: any) => {
                     return <Task task={task} />;
                 }}
             </Lane>
            </div>
         </Board>
        </div>
    );
}

const Task = ({ task }: { task: any }) => {
    return (
        <div style={taskStyle}>
            <div>{task.someData}</div>
            <div></div>
        </div>
    );
};

const boardStyle: React.CSSProperties = {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
};

const taskStyle: React.CSSProperties = {
    color: "black",
    minHeight: "9rem",
    width: "250px",
    margin: "1rem 0 1rem 0",
    background: "rgba(255,255,255,0.2)",
    borderRadius: "1px",
    backdropFilter: "blur(5px)",
    WebkitBackdropFilter: "blur(5px)",
};

const onDragOverStyle: React.CSSProperties = {
    backgroundColor: "rgba(255, 255, 255, 0.2)",
    transition: "background-color 300ms ease",
};

const laneStyle: React.CSSProperties = {
    backgroundColor: "rgba(0,0,0,0.2)",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    height: "100vh",
    width: "300px",
    overflowX: "hidden",
};

export default App;

Board

Board wraps the whole board. Board needs the props:

tasks

An array of tasks. Must contain a dataKey

updateTask

A function that gets run when a task is dropped in a lane. Function is called with a result object. The object contains the task and the laneDataKey

Lane

Props:

style

lane style

title

lane title

dataKey

a string that maches dataKey in lane

onDragOverStyle

style object that gets added to lane when task is dragged over lane