What is Horizontal Timeline in ReactJS ?

0 0 2 minutes read

ReactJS has gained immense popularity in the web development community due to its efficient and flexible nature. It provides developers with a vast array of tools and components to create dynamic and interactive user interfaces. One such component is the Horizontal Timeline, which offers a visually appealing way to present chronological data in a horizontal layout.

Horizontal TimeLine is a timeline or a line plot in a horizontal way that described some event at a point in time. Suppose there are three events that 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

Creating 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: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

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.

Reference: https://www.npmjs.com/package/react-horizontal-timeline

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!