A reusable React Kanban board component for task and workflow management with drag-and-drop functionality.
npm install react-kanbanifybash
npm install react-kanbanify
`
Screenshot
!App Screenshot
Basic Usage
`tsx
import { useState } from "react";
import { ColumnProps, Kanban, TaskProps } from "react-kanbanboard";
import "react-kanbanboard/dist/styles.css";
function App() {
const [tasks, setTasks] = useState([
{ id: 1, content: "Analyze the new requirements.", columnId: "todo" },
{
id: 2,
content: "Arrange a web metting with the customer.",
columnId: "todo",
},
{
id: 3,
content: "Improve application performance.",
columnId: "in_progress",
},
{
id: 4,
content: "Fix the issues reported in the IE browser.",
columnId: "in_progess",
},
{
id: 5,
content: "Fix the issues reported by the customer.",
columnId: "testing",
},
{
id: 6,
content: "Check login page validation.",
columnId: "testing",
},
{ id: 7, content: "Login and sign up flow.", columnId: "done" },
]);
const columns = [
{ id: "todo", label: "To do" },
{ id: "in_progress", label: "In Progess" },
{ id: "testing", label: "Testing" },
{ id: "done", label: "Done" },
];
return (
<>
ColumnComponent={ColumnComponent}
TaskComponent={TaskComponent}
tasks={tasks}
setTasks={setTasks}
columns={columns}
/>
>
);
}
export default App;
`
`tsx
const TaskComponent = ({ task }: TaskProps) => {
return {task.content};
};
`
`tsx
const ColumnComponent = ({ column }: ColumnProps) => {
return (
<>
{column.label}
>
);
};
`
Props
| Prop | Type | Description | Default |
| ----------------- | --------------- | ------------------------------------------------------------------- | ----------- |
| ColumnComponent | ReactNode | Custom component to render each column in the Kanban board. | null |
| TaskComponent | ReactNode | Custom component to render each task inside a column. | null |
| tasks | array