React Custom Gantt

A professional, high-performance, and fully customizable Gantt chart component for React.

Features

• TypeScript Support: Fully typed for a better developer experience.
• Auto-scheduling: Support for task dependencies and date cascading.
• Customizable Columns: Easily define your own columns and templates.
• Standard Connector Types: Support for E2S (FS), S2S (SS), E2E (FF), and S2E (SF) links with validation.
• Interactive: Drag-and-drop to move and resize tasks, and create dependencies visually.
• Built-in Themes: Professional Light and Dark mode support out of the box.
• Milestone Markers: Vertical anchor lines for key project milestones.
• Styling: Modern, premium design with built-in CSS injection.

Installation

npm install react-custom-gantt

Usage

import { GanttChart, Task, Link } from 'react-custom-gantt';

const tasks: Task[] = [
  { id: 1, text: 'Task 1', start: new Date(), duration: 5, type: 'task', progress: 50 }
];

const links: Link[] = [
  { id: 1, source: 1, target: 2, type: 'e2s' }
];

function App() {
  return (
    <GanttChart 
      tasks={tasks}
      links={links}
      onTaskUpdate={(id, updates) => console.log('Update', id, updates)}
      onTaskDelete={(id) => console.log('Delete', id)}
      onLinkCreate={(link) => console.log('New Link', link)}
      onLinkDelete={(id) => console.log('Delete Link', id)}
    />
  );
}

Peer Dependencies

Ensure you have the following installed:

• react >= 18.0.0
• react-dom >= 18.0.0
• moment >= 2.0.0

Advanced Customization

Theming

You can easily customize the colors using the theme prop:

<GanttChart
  theme={{
    primary: '#10b981',
    background: '#ffffff',
    sidebarBackground: '#f3f4f6',
    border: '#e5e7eb',
    text: '#1f2937'
  }}
  // ... other props
/>

Custom Renderers

Take full control over the task bars and tooltips:

<GanttChart
  renderTaskContent={(task) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <span>🔥</span>
      <span>{task.text}</span>
    </div>
  )}
  renderTooltip={(task) => (
    <div className="custom-tooltip">
      <h4>{task.text}</h4>
      <p>Custom Progress: {task.progress}%</p>
    </div>
  )}
  // ... other props
/>

Event Hooks

Listen to various user interactions:

<GanttChart
  onTaskClick={(task) => console.log('Clicked', task)}
  onTaskDoubleClick={(task) => alert(`Editing ${task.text}`)}
  rowHeight={56}
  headerHeight={100}
  // ... other props
/>

Individual Task Styling

You can even style tasks individually via the task object:

const tasks = [
  {
    id: 1,
    text: 'Priority Task',
    start: new Date(),
    duration: 5,
    styles: {
      backgroundColor: '#ef4444',
      progressColor: '#b91c1c'
    }
  }
];

Development

To run the demo app locally:

npm install
npm run dev

To build the library:

npm run build