# @acrool/react-kanban

> Most modern kanban with dnd for ReactJS

Latest version **3.0.2** (published 2025-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @acrool/react-kanban
pnpm add @acrool/react-kanban
yarn add @acrool/react-kanban
bun add @acrool/react-kanban
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2025-05-21 |
| First published | 2024-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=14 |
| Dependencies | 6 |
| Unpacked size | 468.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | imagine10255 |
| Keywords | react, typescript, gantt |

## Links

- npm: https://www.npmjs.com/package/@acrool/react-kanban
- Repository: https://github.com/acrool/acrool-react-kanban
- Homepage: https://github.com/acrool/acrool-react-kanban#readme
- Issues: https://github.com/acrool/acrool-react-kanban/issues
- npm.io page: https://npm.io/package/@acrool/react-kanban

## Dependencies (6)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [@acrool/js-utils](https://npm.io/package/@acrool/js-utils.md) ^3.2.25
- [@acrool/react-img](https://npm.io/package/@acrool/react-img.md) 1.1.3
- [@hello-pangea/dnd](https://npm.io/package/@hello-pangea/dnd.md) ^17.0.0
- [@acrool/react-picker](https://npm.io/package/@acrool/react-picker.md) 1.1.3
- [@acrool/react-dropdown](https://npm.io/package/@acrool/react-dropdown.md) 3.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2025-05-21
- 2.0.1-alpha.5 (alpha) — 2024-12-19
- 3.0.1 — 2025-05-21
- 3.0.0 — 2025-05-21
- 2.0.2 — 2025-04-26
- 2.0.2-test.0 — 2024-12-23
- 2.0.1 — 2024-12-22
- 2.0.1-alpha.4 — 2024-12-17
- 2.0.1-alpha.3 — 2024-12-17
- 2.0.1-alpha.2 — 2024-12-16
- 2.0.1-alpha.1 — 2024-12-16
- 2.0.1-alpha.0 — 2024-12-14
- 2.0.0 — 2024-12-13
- 1.0.7-alpha.3 — 2024-12-10
- 1.0.7-alpha.2 — 2024-12-10
- … 24 more at https://npm.io/package/@acrool/react-kanban/versions

## README

<div align="center">
        <a href="https://acrool.com" title="Acrool Logo - acrool is an Task manager platform to visually design, generate terraform code and manage cloud infrastructure, collaboratively.">
            <img src="https://acrool.com/og.png" alt="Acrool banner" />
        </a>
</div>

<div align="center">



[![NPM](https://img.shields.io/npm/v/acrool-react-kanban.svg?style=for-the-badge)](https://www.npmjs.com/package/acrool-react-kanban)
[![npm downloads](https://img.shields.io/npm/dm/acrool-react-kanban.svg?style=for-the-badge)](https://www.npmjs.com/package/acrool-react-kanban)
[![npm](https://img.shields.io/npm/dt/acrool-react-kanban.svg?style=for-the-badge)](https://www.npmjs.com/package/acrool-react-kanban)
[![npm](https://img.shields.io/npm/l/acrool-react-kanban?style=for-the-badge)](https://github.com/imagine10255/acrool-react-kanban/blob/main/LICENSE)

</div>

## Acrool
Acrool is an Task manager platform to visually design, generate terraform code and manage cloud infrastructure, collaboratively.

If you want to know how to use this Gantt chart, you can use it in Acrool

[Start for free](https://acrool.com/)

## Supports

- Supports interactive operations: move task time, zoom in and out, and change project order
- Support full screen
- Supports three-tier architecture: project/team/task
- Support holiday mode
- Support calendar lazy loading


### Install

```bash
yarn add acrool-react-kanban
```

### Usage

```tsx
import AcroolKanban, {ETaskStatus, IData} from 'acrool-react-kanban';
import 'acrool-react-kanban/dist/index.css';


export const data: IData[] = [
    {
        'id': '01h40wr7tqyas5xsj78tysj9m3',
        'text': 'RICH GAME Mobile 改版',
        'dataLevel': EDataLevel.Project,
        'children': [
            {
                'id': '01gwcrb1yry5ka7g18j6kab2en@PM',
                'text': 'PM',
                'barColor': '#fa6120',
                'dataLevel': EDataLevel.Team,
                'children': [
                    {
                        'id': '01h40wt8kwnw8rez1yy9jbyhvr@PM',
                        'text': 'demand analysis',
                        'progressRate': 0,
                        'estimateWorkTime': 16,
                        'estimateStartDate': '2024-07-10',
                        'estimateEndDate': '2024-07-20',
                        'dataLevel': EDataLevel.Task,
                        'status': ETaskStatus.ReadyStart,
                        'links': ['01h412rzv4s5p7sdw5g435dwc0@PM']

                    },
                ]
            },
        ]
    },
    {
        'id': '01h63jvjbnzr7yx9483f0p34zb',
        'text': 'Agent backend',
        'dataLevel': EDataLevel.Project,
        'milestones': [
            {date: '2024-08-01', name: 'Demand negotiation'},
            {date: '2024-08-20', name: 'Closing date'},
            {date: '2024-11-30', name: 'Payment date'}
        ],
        'children': [
            {
                'id': '01gvz5dzfj2k361jba1brhnz0p',
                'text': 'Frontend',
                'dataLevel': EDataLevel.Team,
                'barColor': '#00bde5',
                'children': [
                    {
                        'id': '01h63pkhr2ymzknjk5a0vfj235_A1',
                        'text': 'Added 2024 login page',
                        // 'assigners': [assignr.imagine],
                        'progressRate': 100,
                        'estimateWorkTime': 4,
                        'estimateStartDate': '2024-12-01',
                        'estimateEndDate': '2024-12-08',
                        'status': ETaskStatus.ReadyStart,
                        'dataLevel': EDataLevel.Task,
                    },
                    {
                        'id': '01h63pkhrwms9necc3veac6rc8_A1',
                        'text': 'New 2024 report-deposits and withdrawals',
                        'assigners': [assignr.gary],
                        'progressRate': 40,
                        'estimateWorkTime': 8,
                        'estimateStartDate': '2024-12-09',
                        'estimateEndDate': '2024-12-14',
                        'dataLevel': EDataLevel.Task,
                    },
                ],
            },
        ]
    }
];

export const CustomBanner = () => {
    return <BearGantt
        data={data}
        isExpandAll={isExpandAll}
        preVisibleDay={startDate}
        nextVisibleDay={endDate}
        onTaskChangeDate={handleTaskChangeDate}
        onInsertTask={handleTaskInsertDate}

        onScrollStart={handleOnScrollStart}
        onScrollEnd={handleOnScrollEnd}

        onLinkAdd={handleAddLink}
        onLinkDelete={handleDeleteLink}
        isSkipHoliday={isSkipHoliday}

        isVisibleStatus={false}
        isVisibleProgressRate={false}
        isVisibleWorkTime

        onTaskChangeSequence={handleOnTaskChangeSequence}
        onClickTask={id => console.log('onClickTask', id)}
        defaultPositionDay={defaultPositionDay}

        isFullScreen={isFullScreen}
        onFullScreen={() => setFullScreen(curr => !curr)}
    />
}
```


### License

MIT © [imagine10255](https://github.com/imagine10255)

---
_Source: https://npm.io/package/@acrool/react-kanban · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._