npm.devtool.tech
👏 You can access frappe-gantt-react package with using frappeGanttReact variable in browser devtools!
It's a React Component, a Wrapper for the awesome [Gantt chart library](https://github.com/frappe/gantt) from Frappé

basic

package
Npm Version
Node Version

popularity

Star
Npm Weekly Downloads
Jsdeliver Month Downloads
Dependents Pkg
Dependents Repo

size

Code Size
Publish Size
Install Size
Minified Size
Gzip Size

quality

Open Issues
Tree Shaking Support
Type Support
Last Commit

health

Package health
Dependency Count
Outdated Dep
Vulnerablities

Frappé Gantt React Wrapper

It's a React Component, a Wrapper for the awesome Gantt chart library from Frappé

For the live demo, you can check their live demo here

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

PropertyDescription
tasksAccepts array of class Task
onTasksChangeAccepts a (tasks: Task[]) => void, where tasks is the new copy —manipulated— of array of tasks
onClickAccepts a (task: Task) => void, where task is the clicked task
onDateChangeAccepts a (task: Task, start: Moment, end: Moment) => void, both start and end are Moment objects
onProgressChangeAccepts a (task: Task, progress: number) => void
onViewChangeAccepts a (mode: ViewMode) => void