What is Horizontal Timeline in ReactJS ?

ReactJS is widely embraced in web development for its efficiency and flexibility, offering developers an extensive toolkit to craft dynamic and interactive user interfaces. Among its components is the Horizontal Timeline, which provides an aesthetically pleasing method to display chronological data in a horizontal format.

Prerequisites:

• Node JS or NPM
• React JS

A horizontal TimeLine is a timeline or a line plot in a horizontal way that describes some event at a point in time. Suppose three events occurred at a given time or date.

Date	Event
1 Jan 2021	New Year
15 Jan 2021	Festival
22 Mar 2021	Board Exam

Then we can represent it in the Horizontal Timeline like below: 

---(1 Jan 2021)----(15 Jan 2021)-----(22 Mar 2021)----

OnClick of 1 Jan we will show the event.    
    
    The event of 1 Jan 2021 : Happy New Year
    
OnClick of 15 Jan we will show the event.

    The event of 15 Jan 2021 : Festival
        
OnClick of 22 Mar we will show the event.

    The event of 22 March 2021 : Board Exam

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the react-horizontal-timeline using the following command.

npm i react-horizontal-timeline

Step 4: Now, Install the prop-types using the following command.

npm i prop-types

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-horizontal-timeline": "^1.5.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Javascript

import React, { useState } from "react";
import HorizontalTimeline from "react-horizontal-timeline";
import "./App.css";

function App() {
    const [value, setValue] = useState(0);
    const [previous, setPrevious] = useState(0);

    // Values should be only date
    const VALUES = ["2021-01-01", "2021-01-15", "2021-03-22"];

    // Description array corresponding to values
    const description = [
        "The event of 1 Jan 2021 : Happy New Year",
        "The event of 15 Jan 2021 : Festival",
        "The event of 22 March 2021 : Board Exam",
    ];

    return (
        <div className="root-div">
            <div style={{
                width: "60%",
                height: "100px",
                margin: "0 auto"
            }}>
                <HorizontalTimeline
                    styles={{ outline: "#DFA867", foreground: "#19295C" }}
                    index={value}
                    indexClick={(index) => {
                        setValue(index);
                        setPrevious(value);
                    }}
                    values={VALUES}
                />
            </div>
            <div className="text-center">{description[value]}</div>
        </div>
    );
}

export default App;

CSS

.text-center {
    text-align: center;
}

.root-div {
    margin-top: 150px;
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.