npm install react-gantt-chart!Logo
!npm
!NPM
!GitHub Workflow Status (branch)
!GitHub Workflow Status (branch)
!GitHub Workflow Status (branch)
React-Gantt-Chart allows you to create custom gantt charts with ease. No more nonsense!
``
npm install --save react-gantt-chart
yarn add react-gantt-chart
pnpm add react-gantt-chart
- 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!
`ts
import React from "react";
import { GanttOriginal, Task, ViewMode } from "react-gantt-chart";
const App = () => {
const [tasks] = React.useState
{
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 (
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!
A demo is worth a thousand words
Check the storybook to see all components!
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 storybook
So now you are ready to make the world better place!
- Make more built-in gantt chart templates
- Simplify some components props and make the ones memoized
You can browse them all here
Licensed under MIT
!Logo