# react-gantt-simple-timeline

> Horizontal gantt timeline

Latest version **1.0.19** (published 2020-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-gantt-simple-timeline
pnpm add react-gantt-simple-timeline
yarn add react-gantt-simple-timeline
bun add react-gantt-simple-timeline
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.19 |
| Published | 2020-01-27 |
| First published | 2020-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 102.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Ramil Gallyamov |
| Maintainers | gallyamow |
| Keywords | timeline, schedule, react, gantt, horizontal |

## Links

- npm: https://www.npmjs.com/package/react-gantt-simple-timeline
- Repository: https://github.com/gallyamow/react-gantt-simple-timeline
- Homepage: https://github.com/gallyamow/react-gantt-simple-timeline#readme
- Issues: https://github.com/gallyamow/react-gantt-simple-timeline/issues
- npm.io page: https://npm.io/package/react-gantt-simple-timeline

## 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

- 1.0.19 (latest) — 2020-01-27
- 1.0.18 — 2020-01-20
- 1.0.16 — 2020-01-16
- 1.0.15 — 2020-01-16
- 1.0.14 — 2020-01-15
- 1.0.13 — 2020-01-14
- 1.0.12 — 2020-01-14
- 1.0.11 — 2020-01-14
- 1.0.10 — 2020-01-14
- 1.0.9 — 2020-01-14
- 1.0.8 — 2020-01-14
- 1.0.7 — 2020-01-14
- 1.0.6 — 2020-01-14
- 1.0.5 — 2020-01-10
- 1.0.4 — 2020-01-10
- … 3 more at https://npm.io/package/react-gantt-simple-timeline/versions

## README

# react-gantt-simple-timeline

> Horizontal gantt timeline

[![NPM](https://img.shields.io/npm/v/react-gantt-simple-timeline.svg)](https://www.npmjs.com/package/react-gantt-simple-timeline) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![image](https://raw.githubusercontent.com/gallyamow/react-gantt-simple-timeline/master/demo.png)

## Features

* custom headers content
* custom element content
* fixed and auto fit width

## Install

```bash
npm install --save react-gantt-simple-timeline
```

## Usage

See [Demo](https://gallyamow.github.io/react-gantt-simple-timeline/index.html)

```jsx
import React, { Component } from 'react'

import Timeline from 'react-gantt-simple-timeline'

class Example extends Component {
  renderElement = (element) => {
    return (
      <div className='your-element'>
        custom content  
      </div>
    )
  }

  renderColHeaderItem = (col) => (
    <div className='your-col-head'>custom title</div>
  )

  renderRowHeaderItem = (col) => (
    <div className='your-row-head'>custom header</div>
  )

  timeFormatFunction = (date) => {
    return formatTime(date)
  }

  handleElementClick = (element, rowIndex, e) => {
  }
  
  render () {
    return (
      <Timeline
        current={new Date()}
        rows={ROWS}
        cols={COLS}
        currentTimeOverlapClass='currentTimeOverlap'
        timeFormatFunction={this.timeFormatFunction}
        renderElement={this.renderElement}
        renderColHeader={this.renderColHeaderItem}
        renderRowHeader={this.renderRowHeaderItem}
        handleElementClick={this.handleElementClick}
        gridColor='#CCCCCC'
        currentTimeOverlapClass='customizeIfNeed'
        rowsHeaderClass='customizeIfNeed'
        colsHeaderClass='customizeIfNeed'
        gridLineClass='customizeIfNeed'
        rowsBodyClass='customizeIfNeed'
      />
    )
  }
}
```

## License

MIT © [Ramil Gallyamov](https://github.com/gallyamow)

## TODO

* declarative layout
* minScale or minColWidth for scrollable grid?
* isReady prop
* display: grid ? 
  https://webdesign.tutsplus.com/tutorials/solving-problems-with-css-grid-the-gantt-chart--cms-33837
  https://codepen.io/ph1p/pen/JBBjNy

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