react-svg-timeline

A React event timeline component based on SVG.

Event Points & Periods
Event Tooltips
Event Lanes
Semantic Zoom (10 Years, 1 Year, 1 Week, 1 Day, etc)
Custom "rubber band" Zoom
Panning

✨ Interactive Demo ✨

Installation

yarn install react-svg-timeline

npm install react-svg-timeline

Note that the following peer dependencies must already be installed:

react and react-dom in version >=16.3
@material-ui/core in version >=4.3

Usage

This is the simplest possible way to get started:

import * as React from 'react'
import { Timeline } from 'react-svg-timeline'

export const App = () => {
  const laneId = 'demo-lane'
  const lanes = [
    {
      laneId,
      label: 'Demo Lane',
    },
  ]
  const events = [
    {
      eventId: 'event-1',
      laneId: laneId,
      startTimeMillis: 1399845600000,
    },
    {
      eventId: 'event-2',
      laneId,
      startTimeMillis: 1167606000000,
      endTimeMillis: 1230698892000,
    },
  ]
  const dateFormat = (ms: number) => new Date(ms).toLocaleString()
  return <Timeline width={600} height={300} events={events} lanes={lanes} dateFormat={dateFormat} />
}

Please check the example folder for a full-fledged feature demonstration.

Library Development

Testing a release candidate

While making changes to this library in the context of a consuming project, yalc can be very handy:

In react-svg-timeline:

yalc publish

In your project consuming the library:

yalc add react-svg-timeline

Publishing a release

yarn publish
git push --tags

Acknowledgements

Thank you:

TSDX for making TS library development easier
GitHub Corners for the callout on the example site

License

Licensed under MIT License.

elmarquez/react-svg-timeline