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

Demo

Out of the box – plain & simple:

Explore our interactive demo for more details on customizations. The demo code can be found in the react-svg-timeline-demo repository.

Alternatively, you are free to use just the zooming & panning interaction logic, e.g. as a layer of the awesome Nivo line chart:

Installation

yarn add react-svg-timeline

or

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.

© Rahel Lüthy 2021