wx-react-gantt/readme.md

SVAR Gantt for React - customizable, interactive Gantt chart component

<div align="center">
  
# SVAR Gantt for React

</div>

<div align="center">

[Website](https://svar.dev/react/gantt/) • [Getting Started](https://docs.svar.dev/react/gantt/getting_started/) • [Demos](https://docs.svar.dev/react/gantt/samples/#/base/willow)

</div>

<div align="center">

[![npm](https://img.shields.io/npm/v/wx-react-gantt.svg)](https://www.npmjs.com/package/wx-react-gantt)
[![npm downloads](https://img.shields.io/npm/dm/wx-react-gantt.svg)](https://www.npmjs.com/package/wx-react-gantt)
[![License](https://img.shields.io/npm/l/wx-react-gantt.svg)](https://www.npmjs.com/package/wx-react-gantt)

</div>

[SVAR React Gantt](https://svar.dev/react/gantt/) is a customizable component that adds interactive, modern-looking Gantt charts to web pages. Easily integrate it into your React app to effectively visualize, organize, and manage tasks and projects.

<div align="center">
  <img src="https://cdn.svar.dev/public/gantt-chart-ui.png" alt="SVAR React Gantt Chart - Screenshot">
</div></br>


## :sparkles: Key Features

- Highly customizable 
- Task types: tasks, summary tasks, milestones
- Task dependencies
- Interactive drag-and-drop interface
- Intuitive and customizable task edit form
- Toolbar and context menu
- Hierarchical view of sub tasks
- Reordering tasks in grid with drag-and-drop
- Tasks sorting
- Configurable timeline (hours, days, weeks)
- Zooming with scroll
- Showing task progress on the taskbar
- Tooltips for taskbars
- Fast performance even with large number of tasks


## :hammer_and_wrench: How to Use

To use the widget, simply import the package and include the component in your React file:

```jsx
import { Gantt } from "wx-react-gantt";
import React, { useRef, useEffect } from "react";

const MyGanttComponent = () => {
  const tasks = [
    {
      id: 20,
      text: "New Task",
      start: new Date(2024, 5, 11),
      end: new Date(2024, 6, 12),
      duration: 1,
      progress: 2,
      type: "task",
      lazy: false,
    },
    {
      id: 47,
      text: "[1] Master project",
      start: new Date(2024, 5, 12),
      end: new Date(2024, 7, 12),
      duration: 8,
      progress: 0,
      parent: 0,
      type: "summary",
    },
    {
      id: 22,
      text: "Task",
      start: new Date(2024, 7, 11),
      end: new Date(2024, 8, 12),
      duration: 8,
      progress: 0,
      parent: 47,
      type: "task",
    },
    {
      id: 21,
      text: "New Task 2",
      start: new Date(2024, 7, 10),
      end: new Date(2024, 8, 12),
      duration: 3,
      progress: 0,
      type: "task",
      lazy: false,
    },
  ];

  const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];

  const scales = [
    { unit: "month", step: 1, format: "MMMM yyy" },
    { unit: "day", step: 1, format: "d" },
  ];

  return <Gantt tasks={tasks} links={links} scales={scales} />;
};

export default MyGanttComponent;
```

For further instructions, follow our detailed [how-to-start guide](https://docs.svar.dev/react/gantt/getting_started/).

## Need Help?
Join our [community forum](https://forum.svar.dev) to get help and submit feature requests. 

## License

SVAR Gantt for React can be used for free under [GPLv3](https://www.gnu.org/licenses/gpl-3.0.html). If you would like to use it in a commerical, non-open source project, please [contact us](https://svar.dev/contact/) for licensing options.