(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
const handleResize = () => {
if (containerRef.current) {
setDimensions({
width: containerRef.current.offsetWidth,
height: containerRef.current.offsetHeight
});
}
};
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return (
{dimensions.width > 0 && (
)}
);
}
```
--------------------------------
### Build Environment Variables with .env files
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/build-and-deployment.md
Define environment variables in .env files for different build modes (all, development, production). These variables can be accessed in the application code via import.meta.env.
```bash
# .env (loaded in all modes)
VITE_APP_TITLE=Gantt Demo
# .env.development (dev server only)
VITE_API_URL=http://localhost:3000
# .env.production (build only)
VITE_API_URL=https://api.example.com
```
```typescript
const appTitle = import.meta.env.VITE_APP_TITLE;
const apiUrl = import.meta.env.VITE_API_URL;
```
--------------------------------
### Export Sample Links Data
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/api-reference.md
Exports an array of sample Gantt link objects, defining task dependencies. Use this to establish sequencing between tasks on the Gantt chart.
```typescript
export const links: Link[]
```
```typescript
import { links } from './demoData';
// Find all dependencies for a specific task
const taskDependencies = links.filter(l => l.source === 5);
// Get all blocking tasks
const blockingTasks = links.map(l => l.source);
```
--------------------------------
### Define App Component
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/module-reference.md
Defines the root App component which renders the GanttChart with demo data. It uses inline styles for full viewport coverage.
```typescript
import GanttChart from './components/Gantt/Gantt.tsx';
import { tasks, links } from './demoData';
export default function App() {
return (
);
}
```
--------------------------------
### Memoize Gantt Tasks and Links
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/integration-guide.md
Use `useMemo` to memoize tasks and links for performance optimization when they are passed as props to the Gantt chart component. This prevents unnecessary re-renders if the data hasn't changed.
```typescript
import { useMemo } from 'react';
import GanttChart from './components/Gantt/Gantt';
function App({ tasks, links }) {
const memoizedTasks = useMemo(() => tasks, [tasks]);
const memoizedLinks = useMemo(() => links, [links]);
return (
);
}
```
--------------------------------
### Development Dependencies for React Gantt
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/build-and-deployment.md
Packages needed only during the development phase, including TypeScript, ESLint, Vite, and React plugins.
```json
{
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"@eslint/js": "^9.39.1",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"typescript": "~5.9.3",
"typescript-eslint": "^8.48.1",
"vite": "^7.3.2"
}
```
--------------------------------
### Task Hierarchy Visualization
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/demo-data-reference.md
This section displays the hierarchical structure of tasks and projects within the demo data. It outlines parent-child relationships and project containment.
```text
Project 1: Office Itinerancy (id: 1)
├─ Project 1.1: Office Facing (id: 2)
│ ├─ Task: Interior Office (id: 5)
│ └─ Task: Air Conditioners Check (id: 6)
├─ Project 1.2: Furniture Installation (id: 3)
│ └─ Task: Workplaces Preparation (id: 7)
└─ Project 1.3: Employee Relocation (id: 4)
├─ Task: Preparing Workplaces (id: 8)
├─ Task: Workplaces Importation (id: 9)
└─ Task: Workplaces Exportation (id: 10)
Project 2: Product Launch (id: 11)
├─ Task: Perform Initial Testing (id: 12)
├─ Task: Analysis (id: 14)
├─ Project 2.1: Development (id: 13)
│ ├─ Task: Develop System (id: 17)
│ ├─ Milestone: Beta Release (id: 25)
│ ├─ Task: Integrate System (id: 18)
│ ├─ Task: Test (id: 19)
│ └─ Task: Marketing (id: 20)
├─ Project 2.2: Design (id: 15)
│ ├─ Task: Design Database (id: 21)
│ ├─ Task: Software Design (id: 22)
│ └─ Task: Interface Setup (id: 23)
├─ Task: Documentation Creation (id: 16)
└─ Milestone: Release v1.0 (id: 24)
```
--------------------------------
### Paginate Large Datasets for Gantt Chart
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/integration-guide.md
Implement pagination to handle large datasets by slicing tasks based on page size and current page. This improves performance by only rendering a subset of tasks at a time.
```typescript
const [pageSize] = useState(50);
const [page, setPage] = useState(0);
const visibleTasks = tasks.slice(
page * pageSize,
(page + 1) * pageSize
);
```
--------------------------------
### Fetch Gantt Data on Component Mount
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/integration-guide.md
Use this pattern to load initial task and link data when the Gantt chart component is first rendered. It fetches data from separate API endpoints for tasks and links.
```typescript
import { useEffect, useState } from 'react';
import GanttChart from './components/Gantt/Gantt';
import { Task, Link } from '@dhtmlx/trial-react-gantt';
function App() {
const [tasks, setTasks] = useState([]);
const [links, setLinks] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function loadData() {
try {
const [tasksRes, linksRes] = await Promise.all([
fetch('/api/tasks'),
fetch('/api/links')
]);
const tasksData = await tasksRes.json();
const linksData = await linksRes.json();
setTasks(tasksData);
setLinks(linksData);
} catch (error) {
console.error('Failed to load data', error);
} finally {
setLoading(false);
}
}
loadData();
}, []);
if (loading) return Loading...
;
return (
);
}
```
--------------------------------
### Environment-Based Configuration for Gantt
Source: https://github.com/dhtmlx/react-gantt-quick-start/blob/main/_autodocs/integration-guide.md
Create a function to generate Gantt configurations based on the environment (e.g., development or production). This is useful for applying different settings like read-only modes or adjusted grid widths.
```typescript
// config.ts
export const getConfig = (env: 'dev' | 'prod'): GanttConfig => {
const baseConfig = {
grid_width: 500,
scales: [/* ... */]
};
if (env === 'prod') {
return {
...baseConfig,
grid_width: 400, // Narrower for production
readonly: true // Read-only in production
};
}
return baseConfig;
};
```
```typescript
import { getConfig } from '../config';
const config = getConfig(import.meta.env.PROD ? 'prod' : 'dev');
```