React wrapper for Bryntum Gantt

This package contains a wrapper that encapsulates Bryntum Gantt and turns it into a React component, exposing configuration options, properties, features, and events.

Version Requirement

• React: 18 or higher
• TypeScript: 4.2 or higher
• Vite 5 or higher

Package Contents

| Path | Description | |---------------|------------------------------------------------| | lib/ | React wrapper components (BryntumGantt etc.) | | src/ | Original source files |

Installation

React Wrapper

npm install @bryntum/gantt-react@latest

Component Package (Required)

npm install @bryntum/gantt@latest

Try Bryntum Online Demos

• View Online React Demos

Quick Start

Replace your App.tsx with the following:

import { FunctionComponent, useRef } from 'react';
import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttProps } from './ganttConfig';
import './App.scss';

const App: FunctionComponent = () => {
  const gantt = useRef<BryntumGantt>(null);

  return <BryntumGantt ref={gantt} {...ganttProps} />;
};

export default App;

Create a GanttConfig.ts file in the src/ directory with the following content:

import { BryntumGanttProps } from "@bryntum/gantt-react";

const ganttProps : BryntumGanttProps = {
    startDate  : new Date(2026, 0, 1),
    endDate    : new Date(2026, 2, 1),
    columns    : [{ type : 'name', field : 'name', width : 250 }],
    viewPreset : 'weekAndDayLetter',
    barMargin  : 10,

    project : {
        transport : {
            load : {
                url : 'data.json'
            }
        },
        autoLoad           : true,
        // Automatically introduces a `startnoearlier` constraint for tasks that (a) have no predecessors, (b) do not use
        // constraints and (c) aren't `manuallyScheduled`
        autoSetConstraints : true
    }
};

export { ganttProps };

Create a public/data/data.json file for example data and add the following JSON data to it:

{
  "success": "true",
  "tasks": {
    "rows": [
      {
        "id": 1,
        "name": "Documentation Project",
        "expanded": true,
        "children": [
          {
            "id": 2,
            "name": "Preparation",
            "expanded": true,
            "children": [
              { "id": 6, "name": "Proof-read docs", "startDate": "2026-01-02", "endDate": "2026-01-09" },
              { "id": 3, "name": "Release docs",    "startDate": "2026-01-09", "endDate": "2026-01-10" }
            ]
          },
          {
            "id": 4,
            "name": "Development",
            "expanded": true,
            "children": [
              { "id": 7, "name": "Write API docs",  "startDate": "2026-01-05", "endDate": "2026-01-12" },
              { "id": 8, "name": "Write tutorials", "startDate": "2026-01-10", "endDate": "2026-01-16" },
              { "id": 9, "name": "Create examples", "startDate": "2026-01-12", "endDate": "2026-01-18" }
            ]
          },
          {
            "id": 5,
            "name": "Review & Release",
            "expanded": true,
            "children": [
              { "id": 10, "name": "Team review",     "startDate": "2026-01-18", "endDate": "2026-01-20" },
              { "id": 11, "name": "Final approval",  "startDate": "2026-01-20", "endDate": "2026-01-21" },
              { "id": 12, "name": "Public release",  "startDate": "2026-01-22", "endDate": "2026-01-22" }
            ]
          }
        ]
      }
    ]
  },
  "dependencies": {
    "rows": [
      { "fromTask": 6,  "toTask": 3  },
      { "fromTask": 7,  "toTask": 8  },
      { "fromTask": 8,  "toTask": 9  },
      { "fromTask": 9,  "toTask": 10 },
      { "fromTask": 10, "toTask": 11 },
      { "fromTask": 11, "toTask": 12 }
    ]
  }
}

This is the data the Bryntum Gantt will use.

Lastly, add some styling to your App.css or index.css:

/* FontAwesome is used for icons */
@import '@bryntum/gantt/fontawesome/css/fontawesome.css';
@import '@bryntum/gantt/fontawesome/css/solid.css';
/* Structural CSS */
@import "@bryntum/gantt/gantt.css";
/* Bryntum theme of your choice */
@import "@bryntum/gantt/svalbard-light.css";

Integration Guide

For details on installing and using this package, see the React Integration Guide.

Wrappers

React wrappers encapsulate Bryntum components as native React components, exposing all configuration options, properties, features, and events through React-familiar patterns like props and callbacks.

Visit Wrappers documentation for the complete list of available wrapper components.

Features

Features are optional modules that extend Bryntum Gantt functionality. Each feature is suffixed with Feature and can be enabled and configured through standard React props.

Visit Features documentation for the complete list of available features and their configuration options.

Explore All Bryntum Products

• Bryntum Grid - High-performance data grid
• Bryntum Scheduler - Resource scheduling component
• Bryntum Scheduler Pro - Advanced scheduling with dependencies
• Bryntum Gantt - Project planning and management
• Bryntum Calendar - Full-featured calendar component
• Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |

Online references

• Bryntum Gantt documentation

• Bryntum Gantt examples

• Bryntum Support Forum

• Contact us

License and copyright

This wrapper depends on Bryntum Gantt, which is commercial software and requires a paid license. Please visit the Bryntum Gantt End User License for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.