react-kanbanify


react-kanbanify is a user-friendly Kanban board library for React, enabling effortless task management and workflow visualization.

---

Features

- 🖱️ Drag-and-Drop Functionality: Organize tasks with ease.
- ⚛️ React-Friendly: Built with React for smooth integration into your projects.
- 📋 Dynamic Task Management: Add, edit, or delete tasks seamlessly.

---

Installation

Install the library via npm:

``bash
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