React js timeline

Hey readers, in this article, we will be learning about the timeline component in React js. If you are new to React, then check out the fundamentals of React article and course on codedamn.

What is the timeline component?

Timeline components are used as a User Interface in React. It describes the stages or processes of current activities or a structure of tasks. The package used is Material UI lab which provides component utility to allow easy development. To understand this better, let’s take an example.

Example

Create React application using the following command: npx create-react-app codedamn

Change the directory of the project using the following command: cd codedamn

Install the required module like Material UI using the following command: npm install @material-ui/core

npm install @material-ui/lab

Component in Material-UI

The Timeline component in Material UI chronologically outputs items and gives the developers freedom to change how it’s displayed on the front-end of the application up to some extent. It has some useful properties which have advantages in React.

• Align: The text can be posted on the left, right, or alternating sides of the timeline.
• Color: It is used to denote the color of the timeline dot at that level. It has properties of the TimelineDot aspect which we use within the Timeline component.

In this example, we will create a stage component that has different stages in the form of a timeline of codedamn. For creating this, create a file stage.js in the src folder of React application and cd over to it.

The component timeline of material UI makes the complex structure look clear and is customizable. 

Given below is the stage.js code

import React from 'react';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
import { Paper } from '@material-ui/core';
const paperstyle={
padding: '8px 1px',
textAlign:'center',
}
export default function Stages() {
return (
<Timeline align="alternate">
<TimelineItem>
<TimelineSeparator>
<TimelineDot color="primary" />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3} style={paperstyle}>Step 1 : Write
</Paper>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot color="primary" />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3} style={paperstyle}>Step 2 : Draft
</Paper>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot color="primary" />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3}
style={paperstyle}>Step 3 : Pending
</Paper>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3}
style={paperstyle}>Step 4 : Publish
</Paper>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}

Given below is the code for App.js which is a default component of an application.

import React, { Component } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Stages from './stages';
class Codedamn extends Component {
render() {
return (
<React.Fragment>
<CssBaseline />
<br></br>
<Container maxWidth="sm">
<Typography component="h1"
variant="h1" align="center"
gutterBottom>
Codedamn
</Typography>
<br />
<Typography component="h3"
variant="h3" align="center"
gutterBottom>
Timeline of an Article of Codedamn
</Typography>
</Container>
<Container maxWidth="sm">
<Stages></Stages>
</Container>
</React.Fragment>
);
}
}
export default Codedamn;

Run the React application using the following command from the root directory of the project: npm start 

Open the browser and type http://localhost:3000; the application will start running.

Horizontal timeline in React

It is a line plot or a timeline in a horizontal way that displays an event or any output according to the date.

To understand this better, let’s take an example.

Example

Create React application using the command: npx create-react-app codedamn

Change the directory of the project using the command: cd codedamn

Install the required module using the command: npm i react-horizontal-timeline

npm i prop-types to install in the project.

Create an App.js file in your project folder and write the following 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);
const VALUES = ["2021-01-01", "2021-01-15", "2021-03-22"];
const description = [
"The event of 1 Jan 2021 : “Holiday",
"The event of 15 Jan 2021 :Codedamn hackathon",
"The event of 22 March 2021 :Codedamn event",
];
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;

Create an App.css file in the src public folder and copy the following code.

Create App.css file
.text-center{
text-align: center;
}
.root-div{
margin-top: 150px;
}

To run the application, write the following command: npm start

Open the browser and type http://localhost:3000 and the application will start running.

Conclusion

If you are interested in learning React js full fledge, do check out courses on codedamn with an in-built environment playground to learn and practice code. Join the community of codedamn and do check out other articles related to programming and development on codedamn and subscribe to our newsletter to never miss out on our new programs and updates.

If you have any queries or feedback do let us know in the comment section, also if you sign up on the codedamn do check out the referral section, copy your link and refer to as many people as possible, and get exciting gifts, swags, and prizes from codedamn so don’t forget to check that out!