@mopex/react-gantt-flow
Version:
A lightweight and high-performance React (TypeScript) based Gantt chart component.
185 lines (146 loc) • 6.28 kB
Markdown
# React Gantt Flow
<a id="readme-top"></a>
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
<br />
<div align="center">
<a href="https://github.com/moppiiiii/react-gantt-flow">
<img src="images/react-gantt-flow.svg" alt="Logo" width="150" height="150">
</a>
<h3 align="center">React Gantt Flow</h3>
<div>
<p>A lightweight and high-performance React (TypeScript) based Gantt chart component.</p>
<p>It achieves excellent rendering performance with SVG and allows intuitive schedule editing with drag & drop.</p>
<br />
<a href="https://main--67923016a18edbfb58483060.chromatic.com">View Demo</a>
<!-- ·
<a href="https://github.com/othneildrew/Best-README-Template/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
·
<a href="https://github.com/othneildrew/Best-README-Template/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a> -->
</div>
</div>
## About The Project
### 🔧 Built With
[![React][React.js]][React-url]
### ✨ Features
- **Drag & Resize** to modify start/end dates
- Update the progress bar using **slider control**
- Automatic rendering of **dependency arrows**
- Toggle **today's line** and **planned vs actual disparity** display with a single click
- Type-safe **TypeScript** API
- No dependencies except for `react` and `date-fns`
<p align="right">(<a href="#readme-top">back to top</a>)</p>
## Getting Started
### 💿 Installation
```bash
# pnpm
pnpm add @mopex/react-gantt-flow
# npm
npm install @mopex/react-gantt-flow
```
> React 19 or higher is required as a peer dependency.
### ⚡ Quick Start
```tsx
import { useState } from "react";
import GanttFlow from "@mopex/react-gantt-flow";
const initialTasks = [
{
id: "task-001",
name: "Design",
startDate: new Date(2025, 0, 1),
endDate: new Date(2025, 0, 7),
progress: 30,
dependencies: [],
},
{
id: "task-002",
name: "Implementation",
startDate: new Date(2025, 0, 8),
endDate: new Date(2025, 0, 21),
progress: 0,
dependencies: ["task-001"],
},
];
export default function App() {
const [tasks, setTasks] = useState(initialTasks);
return (
<GanttFlow
task={tasks}
todaysLineDisplay
disparityDisplay
onChange={(id, newStart, newEnd, newProgress) => {
setTasks((prev) =>
prev.map((t) =>
t.id === id
? {
...t,
startDate: newStart,
endDate: newEnd,
progress: newProgress ?? t.progress,
}
: t,
),
);
}}
/>
);
}
```
<p align="right">(<a href="#readme-top">back to top</a>)</p>
## API Reference
### 📚 `<GanttFlow />` Props
| Name | Type | Default | Description |
| ------------------- | ---------------------------------------- | --------- | --------------------------------------------------------- |
| `task` | `Task[]` | — | Array of tasks to display |
| `todaysLineDisplay` | `boolean` | `false` | Display a vertical line indicating today |
| `disparityDisplay` | `boolean` | `false` | Render disparity between planned and actual as a rectangle |
| `onChange` | `(taskId, newStartDate, newEndDate, newProgress?) => void` | — | Callback invoked when a task is updated |
### ▪️ `Task` Type
```ts
type Task = {
id: string;
name: string;
startDate: Date;
endDate: Date;
progress: number; // 0 ~ 100
dependencies: string[];
status: "todo" | "inProgress" | "done";
};
```
<p align="right">(<a href="#readme-top">back to top</a>)</p>
## Development
```bash
pnpm install # Install dependencies
pnpm storybook # View the UI using Storybook
pnpm build # Build the library (generate dist)
```
<!-- ## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request -->
### 👦 Top contributors
<a href="https://github.com/moppiiiii/react-gantt-flow/graphs/contributors">
<img src="https://contrib.rocks/image?repo=moppiiiii/react-gantt-flow" alt="react-gantt-flow contributors"/>
</a>
<p align="right">(<a href="#readme-top">back to top</a>)</p>
<!-- MARKDOWN LINKS & IMAGES -->
[contributors-shield]: https://img.shields.io/github/contributors/moppiiiii/react-gantt-flow.svg?style=for-the-badge
[contributors-url]: https://github.com/moppiiiii/react-gantt-flow/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/moppiiiii/react-gantt-flow.svg?style=for-the-badge
[forks-url]: https://github.com/moppiiiii/react-gantt-flow/forks
[stars-shield]: https://img.shields.io/github/stars/moppiiiii/react-gantt-flow.svg?style=for-the-badge
[stars-url]: https://github.com/moppiiiii/react-gantt-flow/stargazers
[issues-shield]: https://img.shields.io/github/issues/moppiiiii/react-gantt-flow.svg?style=for-the-badge
[issues-url]: https://github.com/moppiiiii/react-gantt-flow/issues
[license-shield]: https://img.shields.io/github/license/moppiiiii/react-gantt-flow.svg?style=for-the-badge
[license-url]: https://github.com/moppiiiii/react-gantt-flow/blob/main/LICENSE
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/