frappe-gantt-react
Version:
It's a React Component, a Wrapper for the awesome [Gantt chart library](https://github.com/frappe/gantt) from Frappé
67 lines (43 loc) • 2.26 kB
Markdown
# 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` |