In the fast-changing web development landscape, it is amazing to see how React remains the most popular front-end framework, while a Gantt chart is often selected as a core functionality for modern project management apps. We at DHTMLX recognize a high demand for a native React experience among current and potential users of our Gantt chart component. To address this need, we are happy to announce a new DHTMLX React Gantt chart.
Get ready to learn how to enrich your web application with a high-performant React Gantt chart with minimum time and effort and enjoy the rich capabilities of our flagship Gantt.
What to Expect from DHTMLX React Gantt
The new DHTMLX React Gantt is designed to make it much easier for dev teams to seamlessly implement a feature-packed Gantt chart in React projects.
DHTMLX React Gantt with critical path
DHTMLX React Gantt is optimized for the latest React versions (starting from v18) to take full advantage of modern React features and performance optimizations. By focusing on more up-to-date React versions, we ensure a more stable and maintainable solution.
Let us go through the main benefits of using this tool for your application.
Common React Approach
The new DHTMLX solution aligns with React’s principles and lifecycle, allowing developers to build powerful Gantt charts using familiar concepts like props and state. Props enable the configuration and modification of the Gantt component, while the state handles real-time interactions and updates, ensuring a dynamic and responsive user experience.
The React Gantt is installed via npm. Here is an example of importing and rendering the Gantt chart:
import ReactGantt from '@dhx/react-gantt';
import '@dhx/react-gantt/dist/react-gantt.css';
import { demoData } from './DemoData'
export default function BasicGantt() {
const [theme, setTheme] = useState("terrace");
const [tasks, setTasks] = useState(demoData.tasks);
const [links, setLinks] = useState(demoData.links);
return (
<div style={ { height: '500px' } }>
<ReactGantt
tasks={tasks}
links={links}
theme={theme}
/>
</div>
);
}
In addition, the new Gantt for React comes with full TS support and allows using React Components in various parts of the chart, empowering you to use rich ecosystem of React for visualizing data. It also embraces React’s declarative data handling, enabling efficient management and rendering of complex scheduling data, while keeping the codebase clean and maintainable.
Comprehensive Feature Set
You may be wondering what you get with the new DHTMLX React Gantt in terms of functionality. Be sure that our React Gantt has everything you need to build a comprehensive project management app with features of any scale, from basic ones like various task types and dependencies to advanced auto-scheduling, resource management, critical path, etc. The thing is that the new Gantt solution allows you to use the rich arsenal of our JavaScript Gantt via its API.
DHTMLX React Gantt with resource panel
Easy Customization and Styling
Another significant strength of the React Gantt chart is its customizability. You can use React components for templates, lightbox forms, or inline editors to adjust the default Gantt configuration to various requirements.
Dark theme in DHTMLX React Gantt
In the example below, you can see how to use React components in templates:
return <span style={ { color: 'red' } }>{priority}</span>;
}
<ReactGantt
templates={ {
task_text: (start, end, task) => {
return <PriorityBadge priority={task.priority} />;
}
} }
/>
In this piece of code, React elements are returned from template functions.
It is also possible to change the way templates are used for other elements in your React Gantt chart.
For example, here is how you can integrate a custom filter and a React control into a column of the grid:
columns: [
{ name: "text", tree: true, width: 240 },
{ name: "start_date", width: 150, align: "center" },
{ name: "duration", width: 80, align: "center" },
{
name: "custom",
align: "center",
label: <ColumnMenu
onFilterSelected={handleFilterSelected}
currentFilterLabel={filterLabel}
/>,
width: 160,
template: (task: Task) => (
<StatusButtonComponent
task={task}
onClick={() => {
toggleCompleted(task);
}}
/>
)
},
{ name: "add", width: 44 },
]
}
What about such an important aspect as editing the Gantt chart? You can use React components in inline editors of the grid area.
Here is an example of inline editors in the Gantt grid built with React:
Inline editors in DHTMLX React Gantt
Also, you have an opportunity to replace the default task editing window (Lightbox) with a React-based modal or any other component. Find the detailed description in the documentation.
There are several built-in themes to change the styling of your Gantt. Themes can be enabled via the theme prop and changed dynamically as follows:
import ReactGantt from "@dhx/react-gantt";
import "@dhx/react-gantt/dist/react-gantt.css";
export default function BasicInitDemo() {
const [theme, setTheme] = useState("terrace");
const tasks = [.];
const links = [...];
const switchTheme = () => {
setTheme((prevTheme) => (prevTheme === "terrace" ? "dark" : "terrace"));
};
return (
<div style={ {height: '600px'} }>
<div>
<button onClick={switchTheme}>Switch Theme</button>
</div>
<ReactGantt
tasks={tasks}
links={links}
theme={theme} /*!*/
/>
</div>
);
};
If needed, these themes can be further modified with custom styles and by overriding CSS variables:
--dhx-gantt-task-background: #d96c49;
--dhx-gantt-task-color: #fff;
--dhx-gantt-task-border-radius: 8px;
}
If you think that it is not enough to cover the styling needs of your projects, our React Gantt is compatible with Material UI. You can leverage a comprehensive design system of this CSS framework for creating Gantt charts that align with the styling peculiarities of any app.
Enhance React Gantt with TypeScript, Redux, and SSR Frameworks Compatibility
DHTMLX React Gantt is built with an eye toward the future since it is compatible with numerous highly demanded technologies.
Our React Gantt supports TypeScript, allowing you to leverage static typing, advanced error detection, and better code maintainability. For efficient state management of Gantt chart data, you can benefit from the integration with the Redux library. Using Redux with the React Gantt component allows you to manage and store Gantt settings in a centralized state, separate from the Gantt itself. This makes it possible to read and modify these settings from other parts of the application.
Apart from that, our React Gantt is also compatible with Next.js and Remix frameworks. However, since Gantt charts rely on the DOM and browser APIs, they cannot be fully rendered on the server side, thus, you should disable SSR rendering to ensure smooth work on the client side. Follow our recommendations on integrating the Gantt component into your SSR-powered projects.
Pay for One Gantt, and Get Two
Last but not least, new DHTMLX clients who opt for DHTMLX Gantt under Commercial, Enterprise, and Ultimate licenses will get JS and React Gantt versions for the same price! Owners of the current DHTMLX Gantt license can send their license numbers to contact@dhtmlx.com to get access to the React version as well.
These are the main highlights of DHTMLX React Gantt. Check out the documentation for full details.
You can try the React Gantt in your use-case scenarios by downloading a free 30-day trial version.
We invite you to share comments on your experience with DHTMLX React Gantt in the section below.