react-gantt-chart
TypeScript icon, indicating that this package has built-in type declarations

0.3.0-rc.11 • Public • Published

Logo

react-gantt-chart

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!

Installation

npm install --save react-gantt-chart
yarn add react-gantt-chart
pnpm add react-gantt-chart

Features

  • 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 storybook

So 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

Logo

Package Sidebar

Install

npm i react-gantt-chart

Weekly Downloads

92

Version

0.3.0-rc.11

License

MIT

Unpacked Size

210 kB

Total Files

55

Last publish

Collaborators

  • nikitasmiththeone