https://github.com/mickamy/frappe-gantt-react-wrapper
https://github.com/mickamy/frappe-gantt-react-wrapper
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mickamy/frappe-gantt-react-wrapper
- Owner: mickamy
- License: mit
- Created: 2025-03-29T02:34:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-29T03:25:21.000Z (about 1 year ago)
- Last Synced: 2025-03-29T03:27:31.858Z (about 1 year ago)
- Language: TypeScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# frappe-gantt-react-wrapper
A minimal React wrapper component for [frappe-gantt](https://github.com/frappe/gantt), built with TypeScript.
## Features
- 🧩 Simple React wrapper for `frappe-gantt`
- 🔧 Written in TypeScript
- 📦 Compatible with React 18+
- 🎯 Minimal, easily extensible
## Installation
```
npm install frappe-gantt-react-wrapper frappe-gantt
```
> react and react-dom are required as peer dependencies.
>
## Usage
```
import React from 'react';
import FrappeGantt, { Task } from 'frappe-gantt-react-wrapper';
import 'frappe-gantt/dist/frappe-gantt.css';
const tasks: Task[] = [
{
id: 'Task-1',
name: 'Design',
start: '2025-04-01',
end: '2025-04-05',
progress: 80
},
{
id: 'Task-2',
name: 'Development',
start: '2025-04-06',
end: '2025-04-15',
progress: 20,
dependencies: 'Task-1'
}
];
export default function App() {
return ;
}
```
## Props
| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `tasks` | `Task[]` | ✅ | List of Gantt tasks |
| `viewMode` | `'Day' | 'Week' | ...` | ❌ | Initial view mode (default: Day) |
| `onClickTask` | `(task: Task) => void` | ❌ | Callback for task click events |
## Task Shape
```
export interface Task {
id?: string;
name: string;
start: string;
end?: string;
duration?: string;
progress: number;
dependencies?: string | string[];
color?: string;
custom_class?: string;
}
```
## Internal Logic
The component uses `useEffect` and `ref` to manage the chart lifecycle.
```
useEffect(() => {
if (!containerRef.current) return;
if (!ganttRef.current) {
ganttRef.current = new Gantt(containerRef.current, tasks, {
view_mode: viewMode,
on_click: onClickTask,
});
} else {
ganttRef.current.refresh(tasks);
ganttRef.current.change_view_mode(viewMode);
}
return () => {
containerRef.current.innerHTML = '';
ganttRef.current = null;
};
}, [tasks, viewMode, onClickTask]);
```
## Build and Publish
```
npm run build
npm publish --access public
```
Make sure your `package.json` includes the appropriate fields:
```
{
"main": "dist/frappe-gantt-react-wrapper.umd.js",
"module": "dist/frappe-gantt-react-wrapper.es.js",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/frappe-gantt-react-wrapper.es.js",
"require": "./dist/frappe-gantt-react-wrapper.umd.js",
"types": "./dist/index.d.ts"
}
},
"files": ["dist", "src"]
}
```
## License
[MIT](./LICENSE)