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
