Starter project showing how to use DHTMLX React Gantt in a React App.
Note, @dhx/react-gantt and @dhx/trial-react-gantt are hosted on a private Npm registry. You need to configure your npm client and request access to them.
-
Start a trial to gain access to @dhx npm registry and follow the provided instructions for npm configuration.
-
Clone the repo and run
git clone https://github.com/dhtmlx/react-gantt-quick-start.git cd react-gantt-quick-start yarn yarn startThe component allows simple declarative initialization:
import { useRef } from 'react'; import Gantt, { ReactGanttRef, Task, Link, GanttConfig } from '@dhx/trial-react-gantt'; import "@dhx/trial-react-gantt/dist/react-gantt.css"; export interface GanttProps { tasks: Task[]; links: Link[]; } export default function GanttChart({ tasks, links }: GanttProps) { const ganttRef = useRef<ReactGanttRef>(null); const config: GanttConfig = { grid_width: 500, scale_height: 90, scales: [ { unit: 'year', step: 1, date: '%Y' }, { unit: 'month', step: 1, date: '%M' }, { unit: 'day', step: 1, date: '%d %M' } ] }; return ( <Gantt ref={ganttRef} tasks={tasks} links={links} config={config} data={{ save: (entity: string, action: string, data: any, id: string|number) => { console.log(`${entity} - ${action} - ${id}`, data); } }} /> ); }Check the Online documentation to find more.
src/ components/Gantt Gantt.tsx <- <GanttChart /> component demoData.ts <- minimal task/link arrays App.tsx <- mounts Gantt main.tsx public/ index.html Start your 30-day trial to download the complete sample pack (auto-scheduling, resource histogram, Redux integration, etc.).
The code in this repository is released under the MIT License.
@dhx/react-gantt and @dhx/trial-react-gantt are commercial libraries - use them under a valid license or evaluation agreement.