Make a timeline using material ui

by | Sep 23, 2024 | Technology

To create a timeline using Material-UI (now called MUI), you can leverage MUI’s Timeline component. MUI provides a highly customizable Timeline system with various TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, and TimelineDot components. Below is an example of how you can create a timeline in a React app:

1. Install MUI Core and Icons:

First, if you haven’t installed MUI in your project yet, run the following command to install it along with the icons package:

bash
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

2. Create a Timeline Component:

Here’s a basic example of how to create a vertical timeline using MUI:

jsx
import React from 'react';
import {
Timeline,
TimelineItem,
TimelineSeparator,
TimelineConnector,
TimelineContent,
TimelineDot,
TimelineOppositeContent
} from '@mui/lab';
import { Typography, Paper } from '@mui/material';
import WorkIcon from '@mui/icons-material/Work';
import SchoolIcon from '@mui/icons-material/School';
import StarIcon from '@mui/icons-material/Star';

export default function CustomTimeline() {
return (
<Timeline position="alternate">
<TimelineItem>
<TimelineOppositeContent color="textSecondary">
<Typography>2020</Typography>
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot color="primary">
<WorkIcon />
</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3} style={{ padding: '10px' }}>
<Typography variant="h6" component="h1">
Job at ABC Corp
</Typography>
<Typography>Started working at ABC Corporation as a Frontend Developer.</Typography>
</Paper>
</TimelineContent>
</TimelineItem>

<TimelineItem>
<TimelineOppositeContent color="textSecondary">
<Typography>2018</Typography>
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot color="secondary">
<SchoolIcon />
</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3} style={{ padding: '10px' }}>
<Typography variant="h6" component="h1">
Graduated from University
</Typography>
<Typography>Completed Bachelor's degree in Computer Science.</Typography>
</Paper>
</TimelineContent>
</TimelineItem>

<TimelineItem>
<TimelineOppositeContent color="textSecondary">
<Typography>2015</Typography>
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot>
<StarIcon />
</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3} style={{ padding: '10px' }}>
<Typography variant="h6" component="h1">
Won a Coding Competition
</Typography>
<Typography>Won the state-level coding competition for high school students.</Typography>
</Paper>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}

3. Explanation:

  • Timeline: The main wrapper component for the timeline.
  • TimelineItem: Each event or entry in the timeline is a TimelineItem.
  • TimelineSeparator: Separates the TimelineDot and TimelineConnector.
  • TimelineDot: Represents a point or event in the timeline.
  • TimelineConnector: A line connecting each TimelineDot.
  • TimelineContent: Contains the actual description/content for each timeline event.
  • TimelineOppositeContent: Displays the timestamp or any additional data on the opposite side of the content.

4. Customization:

  • You can change the icons in the TimelineDot by using any icon from MUI Icons.
  • Adjust the TimelineConnector and TimelineDot styles to change the timeline’s appearance.
  • Modify the Paper component to add more styles like color or shadow to the content.

5. Render the Timeline:

Make sure to import this CustomTimeline component into your main app file and render it like so:

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import CustomTimeline from './CustomTimeline';

function App() {
return (
<div>
<h1>My Timeline</h1>
<CustomTimeline />
</div>
);
}

ReactDOM.render(<App />, document.getElementById('root'));

This will create a fully functional timeline using MUI components.

×
Sign in
Sign up

Sign In

Sign Up