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.

DateEvent
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.

App.js




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;

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :