@cielblog/react-horizontal-timeline v1.0.2

React Horizontal Timeline

A React port of the horizontal time-line developed by sherubthakur and re-developed by twinkble

Here is a demo.

NOTE

The original package sherubthakur/react-horizontal-timeline is no longer maintained, and I re-developed the package and added additional features.

Support

I will appreciate your support to keep me going on maintaining & making packages like this one.

Install

$ yarn insall @cielblog/react-horizontal-timeline

// Or use npm
$ npm install @cielblog/react-horizontal-timeline

API

It will just render a timeline with the titles (can be dates or anything) that you provided, and it is up to you what to do when a title is selected. i.e. it will give you the index of the title that was clicked, and you can do anything with it.

Usage

import React, {useState} from 'react'
import HorizontalTimeline from "@cielblog/react-horizontal-timeline";

const TITLES = [
    'Title1',
    'Title 2',
    'Title 3',
];

export const MyTimeline = (props) => {
    const [current, setCurrent] = useState(0)
    
    return (
        <div>
            <HorizontalTimeline titles={TITLES} index={current} onTitleClick={(index) => setCurrent(index)}/>
        </div>
    )
}