What is Horizontal Timeline in ReactJS ?
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.
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.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Step to Run Application: Run the application using the following command from the root directory of the project.
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.