react-modern-gantt v0.1.0

React Modern Gantt

A modern, customizable Gantt chart component for React applications. This package provides an intuitive interface for creating interactive project timelines with drag and resize capabilities.

Features

• 📅 Interactive timeline with drag and resize capabilities
• 🎨 Fully customizable themes and appearances
• 📱 Responsive design that works on all screen sizes
• 🔄 Event-based architecture for easy integration
• 📊 Support for task progress indicators
• 🏷️ Tooltips with detailed task information
• 🏃‍♂️ High-performance rendering even with large datasets
• 📦 Lightweight with minimal dependencies

Installation

npm install react-modern-gantt
# or
yarn add react-modern-gantt

Basic Usage

import React, { useState } from 'react';
import { GanttChart } from 'react-modern-gantt';

const MyProject = () => {
  const [people, setPeople] = useState([
    {
      id: "1",
      name: "Alice Johnson",
      tasks: [
        {
          id: "task-1",
          name: "Website Redesign",
          startDate: new Date(2023, 0, 1),
          endDate: new Date(2023, 2, 15),
          color: "bg-blue-500",
          percent: 75
        }
      ]
    }
    // Add more people and tasks here
  ]);

  const handleTaskUpdate = (personId, updatedTask) => {
    setPeople(currentPeople =>
      currentPeople.map(person =>
        person.id === personId
          ? {
              ...person,
              tasks: person.tasks.map(task =>
                task.id === updatedTask.id ? updatedTask : task
              )
            }
          : person
      )
    );
  };

  return (
    <GanttChart
      people={people}
      title="Project Timeline"
      onTaskUpdate={handleTaskUpdate}
    />
  );
};

export default MyProject;

Advanced Configuration

Props

The GanttChart component accepts the following props:

Data Types

interface Task {
    id: string;
    name: string;
    startDate: Date;
    endDate: Date;
    color: string;
    percent?: number; // Optional: task completion percentage
    dependencies?: string[]; // Optional: IDs of tasks this depends on
}

interface Person {
    id: string;
    name: string;
    tasks: Task[];
    avatar?: string; // Optional: URL or initial for avatar
    role?: string; // Optional: Role description
}

interface GanttTheme {
    headerBackground?: string;
    headerText?: string;
    timelineBackground?: string;
    timelineBorder?: string;
    timelineText?: string;
    taskDefaultColor?: string;
    highlightColor?: string;
    todayMarkerColor?: string;
    tooltipBackground?: string;
    tooltipText?: string;
}

Customizing the Theme

const customTheme = {
  headerBackground: "bg-indigo-50",
  headerText: "text-indigo-800",
  timelineBackground: "bg-gray-50",
  timelineBorder: "border-indigo-100",
  taskDefaultColor: "bg-indigo-600",
  todayMarkerColor: "bg-pink-500"
};

// Then in your component:
<GanttChart
  people={people}
  theme={customTheme}
  // ...other props
/>

Handling Events

Task Updates (Move & Resize)

const handleTaskUpdate = (personId, updatedTask) => {
  console.log(`Task ${updatedTask.id} was updated`);

  // Update your state with the new task dates
  setPeople(currentPeople =>
    currentPeople.map(person =>
      person.id === personId
        ? {
            ...person,
            tasks: person.tasks.map(task =>
              task.id === updatedTask.id ? updatedTask : task
            )
          }
        : person
    )
  );

  // Optionally save to backend
  saveTaskToBackend(personId, updatedTask);
};

Task Clicks

const handleTaskClick = (task, person) => {
  console.log(`Clicked on task ${task.name} belonging to ${person.name}`);

  // You could show a modal with task details
  setSelectedTask(task);
  setTaskDetailsModalOpen(true);
};

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.