react-gantt

Gantt chart react component

Please ★ this repo if you found it useful ★ ★ ★

Submit your ReactGantt use cases and I will feature them in the in the used by section

Built by Vite

Vite Next generation frontend tooling

Features

• Multiple steps
• Custom styles
• Dynamic bounds
• zoom
• drag
• typescript support

Demo

See a demo

Installation

npm i web-react-gantt --save
# or yarn add  web-react-gantt --save

Dependencies

• NodeJS
• React
• React DOM

Usage

import React, { useState } from "react";

import {
  Timeline,
  Activebar,
  getTimeline,
  UnitType,
  ConfigContext,
} from "web-react-gantt";

function App() {
  const [scale, setCount] = useState(30);
  const data = getTimeline(36);
  const unit = 15;
  const type = "hour";
  const pice = UnitType[type] / unit;
  const width = data.length * scale * pice;

  return (
    <div className="App">
      <div className="flex">
        <div className="left">
          <button onClick={() => setCount(scale + 5)}>+</button>

          <button onClick={() => setCount(scale - 5)}>-</button>
        </div>
        <div className="right">
          <ConfigContext.Provider value={{ unit, type, scale, width }}>
            <Timeline data={data} />
            <Activebar name={"活动中"} start={9} end={16} />
            <Activebar name={"活动2"} start={3} end={8} />
          </ConfigContext.Provider>
        </div>
      </div>
    </div>
  );
}

export default App;

Develop

git clone [email protected]:bjtqti/gantt.git

cd web-react-gannt
npm install
npm start

• after installed then vistor http://localhost:3000

ReactGantt

Timeline

Activebar

Timeline

| Prop Name | Type

width: number; unit: number; scale: number; type: TimelineType; data: TimelineDataProps[]; scale?: number; type?: TimelineType; unit?: number;

Activebar

| Prop Name | Type

start: number; end: number; name?: string;

Screenshots

Contributing

Review the guidelines for contributing

License

MIT License

ouyangli © 2022

Changelog

Review the changelog

Credits

• ouyangli - Author