/react-svg-timeline

React event timeline component based on SVG

Primary LanguageTypeScriptOtherNOASSERTION

react-svg-timeline Build Status GitHub license npm version Netlify Status

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

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