React Horizontal Timeline

A react port of the horizontal time-line developed by CodyHouse. Here is a demo I hope you too are a fan of the elder scrolls.

NOTE

This package is no longer maintained by me. If you find it usefull and would like to be a maintainer for this package please contact me [email protected]

HorizontalTimeline

It will just render a timeline with the dates that you provided and it is up to you what to do when a date is selected. i.e. it will give you the index of the date that was clicked and you can do anything with it.

This is how it can be used.

import HorizontalTimeline from 'react-horizontal-timeline';

/*
Format: YYYY-MM-DD
Note: Make sure dates are sorted in increasing order
*/
const VALUES = [
    '2008-06-01',
    '2010-06-01',
    '2013-06-01',
    '2015-03-01',
    '2019-01-01',
    '2019-06-17',
    '2019-08-01',
];

export default class App extends React.Component {
  state = { value: 0, previous: 0 };

  render() {
    return (
      <div>
        {/* Bounding box for the Timeline */}
        <div style={{ width: '60%', height: '100px', margin: '0 auto' }}>
          <HorizontalTimeline
            index={this.state.value}
            indexClick={(index) => {
              this.setState({ value: index, previous: this.state.value });
            }}
            values={ VALUES } />
        </div>
        <div className='text-center'>
          {/* any arbitrary component can go here */}    
          {this.state.value}
        </div>
      </div>
    );
  }
}

For more advanced usage take a look at the demos directory.

Running the development version

• Just clone the repo and do an npm install (or yarn install)
• Note: You will need to do npm install react react-dom to install peerDependencies as both yarn and npm don't do this.
• Run npm run start/npm start/yarn start.
• Then go to localhost:5001/demos/<demo_name>/index.html to see the fruits of your labor.

Here is the information provided by the original author.

An easy to customize, horizontal timeline powered by CSS and jQuery.

Article on CodyHouse

Demo

Terms