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