Skip to content
Related Articles

Related Articles

Improve Article

What is Horizontal Timeline in ReactJS ?

  • Last Updated : 16 Jun, 2021

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.

1 Jan 2021New Year
15 Jan 2021Festival
22 Mar 2021Board 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.


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" }}>
          styles={{ outline: "#DFA867", foreground: "#19295C" }}
          indexClick={(index) => {
      <div className="text-center">{description[value]}</div>
export default App;


   text-align: center;
  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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :