# frappe-first-gantt

> It's a React Component, a Wrapper for the awesome [Gantt chart library](https://github.com/frappe/gantt) from Frappé

Latest version **0.3.1** (published 2021-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install frappe-first-gantt
pnpm add frappe-first-gantt
yarn add frappe-first-gantt
bun add frappe-first-gantt
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2021-10-06 |
| First published | 2021-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 65.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 78 |
| Author | Marin Jursic |
| Maintainers | marinjursic |
| Keywords | react, frappe gantt wrapper, gantt, svg, simple gantt, project timeline, interactive gantt, project management |

## Links

- npm: https://www.npmjs.com/package/frappe-first-gantt
- Repository: https://github.com/mohammed-io/frappe-gantt-react
- Homepage: https://github.com/mohammed-io/frappe-gantt-react#readme
- Issues: https://github.com/mohammed-io/frappe-gantt-react/issues
- npm.io page: https://npm.io/package/frappe-first-gantt

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.8.6
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [patch-package](https://npm.io/package/patch-package.md) ^6.4.7
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [frappe-gantt-first](https://npm.io/package/frappe-gantt-first.md) ^0.3.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2021-10-06
- 0.3.0 — 2021-10-06
- 0.2.9 — 2021-10-06
- 0.2.8 — 2021-10-05
- 0.2.7 — 2021-09-29
- 0.2.6 — 2021-09-29
- 0.2.5 — 2021-09-29
- 0.2.4 — 2021-09-29
- 0.2.3 — 2021-09-29
- 0.2.2 — 2021-09-29

## README

# Frappé Gantt React Wrapper

It's a React Component, a Wrapper for the awesome [Gantt chart library](https://github.com/frappe/gantt) from Frappé

For the live demo, you can check their live demo [here](https://frappe.github.io/gantt/)

## Install

> npm install frappe-gantt-react

or

> yarn add frappe-gantt-react

## Usage

Import it to your project

Using ES6 modules

`import { FrappeGantt } from 'frappe-gantt-react`

Or using CommonJS

`const { FrappeGantt } = require('frappe-gantt-react')`

Then you can use it in your react app:

    class App extends React.Component {

        ...

        render() {

            return (
                ...
                <div>
                    <FrappeGantt
                        tasks={tasks}
                        viewMode={this.state.mode}
                        onClick={task => console.log(task)}
                        onDateChange={(task, start, end) => console.log(task, start, end)}
                        onProgressChange={(task, progress) => console.log(task, progress)}
                        onTasksChange={tasks => console.log(tasks)}
                    />
                </div>
                ...

            )

        }

    }

## The API

### The component `props`

|      Property      | Description                                                                                         |
| :----------------: | :-------------------------------------------------------------------------------------------------- |
|      `tasks`       | Accepts array of class `Task`                                                                       |
|  `onTasksChange`   | Accepts a `(tasks: Task[]) => void`, where `tasks` is the new copy —manipulated— of array of tasks  |
|     `onClick`      | Accepts a `(task: Task) => void`, where `task` is the clicked task                                  |
|   `onDateChange`   | Accepts a `(task: Task, start: Moment, end: Moment) => void`, both start and end are Moment objects |
| `onProgressChange` | Accepts a `(task: Task, progress: number) => void`                                                  |
|   `onViewChange`   | Accepts a `(mode: ViewMode) => void`                                                                |

---
_Source: https://npm.io/package/frappe-first-gantt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._