NikitaSmithTheOne
react-gantt-chart
React-Gantt-Chart allows you to create custom gantt charts with ease. No more nonsense!
Installation
npm install --save react-gantt-chart
yarn add react-gantt-chart
pnpm add react-gantt-chartFeatures
- Easy to set up for real
- Super easy to customize 🔥
- RTL support
- Easy to create your own templates
- Small bundle size
- Support ESM and CJS
- Zero dependencies
- And much more!
The gist
import React from "react";
import { GanttOriginal, Task, ViewMode } from "react-gantt-chart";
const App = () => {
const [tasks] = React.useState<Task[]>([
{
type: "project",
id: "ProjectSample",
name: "1.Project",
start: new Date(2021, 6, 1),
end: new Date(2021, 9, 30),
progress: 25,
hideChildren: false,
},
{
type: "task",
id: "Task 0",
name: "1.1 Task",
start: new Date(2021, 6, 1),
end: new Date(2021, 6, 30),
progress: 45,
project: "ProjectSample",
},
{
type: "task",
id: "Task 1",
name: "1.2 Task",
start: new Date(2021, 7, 1),
end: new Date(2021, 7, 30),
progress: 25,
dependencies: ["Task 0"],
project: "ProjectSample",
},
{
type: "task",
id: "Task 2",
name: "1.3 Task",
start: new Date(2021, 6, 1),
end: new Date(2021, 7, 30),
progress: 10,
dependencies: ["Task 1"],
project: "ProjectSample",
},
{
type: "milestone",
id: "Task 6",
name: "1.3.1 MileStone (KT)",
start: new Date(2021, 6, 1),
end: new Date(2021, 6, 30),
progress: 100,
dependencies: ["Task 2"],
project: "ProjectSample",
},
]);
return (
<GanttOriginal
tasks={tasks}
viewMode={ViewMode.Month}
columnWidth={200}
ganttHeight={200}
/>
);
};
export default App;So easy! Is not it? ✨
❗❗❗ Important Note: The package is not production ready yet! I believe within close future it'll be ready so now you can try this out and share your feedback. Thanks!
Demo
A demo is worth a thousand words
Storybook
Check the storybook to see all components!
Contributing
Contributions are always welcome! Show your ❤️ and support by giving a ⭐.
Take a look at the contributing guide:
- Fork the repository
- Run scripts
npm i
npm run lib:build -- -w
npm run lib:link
npm run start # check examples
npm run storybook # check storybookSo now you are ready to make the world better place!
Roadmap
- Make more built-in gantt chart templates
- Simplify some components props and make the ones memoized
Release Notes
You can browse them all here
License
Licensed under MIT
Authors
Alternative Logo
