React Gantt Flow

About The Project

🔧 Built With

✨ 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

Getting Started

💿 Installation

# 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

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,
          ),
        );
      }}
    />
  );
}

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

type Task = {
  id: string;
  name: string;
  startDate: Date;
  endDate: Date;
  progress: number; // 0 ~ 100
  dependencies: string[];
  status: "todo" | "inProgress" | "done";
};

Development

pnpm install       # Install dependencies
pnpm storybook     # View the UI using Storybook
pnpm build         # Build the library (generate dist)

👦 Top contributors