What is Horizontal Timeline in ReactJS ?
ReactJS is widely embraced in web development for its efficiency and flexibility, offering developers an extensive toolkit to craft dynamic and interactive user interfaces. Among its components is the Horizontal Timeline, which provides an aesthetically pleasing method to display chronological data in a horizontal format.
Prerequisites:
A horizontal TimeLine is a timeline or a line plot in a horizontal way that describes some event at a point in time. Suppose three events 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
Steps to create 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:
The updated dependencies in package.json file will look like:
"dependencies": {
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-horizontal-timeline": "^1.5.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Now write down the following code in the App.js file.
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.