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
