react-timelinejs

React Timeline component

Live Demo

For examples of timeline, go to https://wizcheng.github.io/react-timelinejs

Getting Started

Install

yarn add -D react-timelinejs

Usage

import Timeline from 'react-timelinejs';
...


const data = [
    {
        start: new Date('2018-07-12T13:14:15'),
        end: new Date('2018-07-12T15:14:15'),
        label: 'My First Event 1'
    },
    {
        start: new Date('2018-07-16:14:15'),
        end: new Date('2018-07-12T17:14:15'),
        label: 'My First Event 2'
    },
    {
        start: new Date('2018-07-12T12:14:15'),
        end: new Date('2018-07-12T19:14:15'),
        label: 'My Second Event'
    }
];

...
<Timeline data={data}/>

Properties

| Props | Type | Default | Description | | -------------- | ------ | ------ | ---------------------------- | | data | Array | [] | List of time line events, minimum values start,end,label | | lines | Array | [] | List of lines, minimum values date, className | | dataKey | string | null | key of data, passed to d3js, to optimize modification detection | | width | number | 700 | width of whole widget | | height | number | 400 | height of whole widget | | trackHeight | number | 20 | Max height of each track | | label | bool | true | Show label on the track or not | | tooltips | bool | true | Show tooltip on mouseover | | tooltipContent | func | TBA | function (d) => {}, to return content of tooltip | | brush | bool | false | Show brush | | brushRange | Array | null | brush range, [start, end] | | range | Array | null | range of data to focus, [start, end] | | onBrush | func | null | callback on brush change | | onMouseover | func | null | callback on mouseover event | | onClick | func | null | callback on mouse click event, (d) => {} |

Custom Styles

TBA