How to create a vertical timeline component in React
In this article, we will show you how to create a vertical timeline component in React. Here we’ll use the NPM Package to draw a vertical timeline in React component.
Checkout more articles on ReactJS
Demo Application
Package Version
react
^17.0.2
react-vertical-timeline-component
^3.5.2
@fortawesome/react-fontawesome
^0.1.18
@fortawesome/free-solid-svg-icons
^6.1.1
File Structure
- react-vertical-timeline-example
- node_modules
- public
- index.html
- src
- App.js
- index.css
- index.js
- package-lock.json
- package.json
- README.md
Steps to create a vertical timeline component
1. Install dependency
Here, we’ll use the react-vertical-timeline-component to add timeline in React application. Run the following command to install the dependency.
1 | npm i react-vertical-timeline-component |
Also, we will add Font Awesome package to draw icons in the timeline. If you don’t know how to add Font Awesome to the React, refer to the article below.
How to add Font Awesome 5 in React
2. Prepare data to render in timeline
Let’s prepare the timeline data in form of the Array. We have also passed the icons object in the list to render the icon based on data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // ... // ... import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBriefcase, faSchool, faStar } from '@fortawesome/free-solid-svg-icons'; const workIcon = { icon: <FontAwesomeIcon icon={faBriefcase} />, iconStyle: { background: 'rgb(33, 150, 243)', color: '#fff' } }; const schoolIcon = { icon: <FontAwesomeIcon icon={faSchool} />, iconStyle: { background: 'rgb(233, 30, 99)', color: '#fff' } }; const starIcon = { icon: <FontAwesomeIcon icon={faStar} />, iconStyle: { background: 'rgb(16, 204, 82)', color: '#fff' } }; // ... // ... const timeline = [ { icon: workIcon, date: '2011 - present', title: 'Creative Director', subtitle: 'Miami, FL', desc: 'Creative Direction, User Experience, Visual Design, Project Management, Team Leading' }, { icon: workIcon, date: '2010 - 2011', title: 'Art Director', subtitle: 'San Francisco, CA', desc: 'Creative Direction, User Experience, Visual Design, SEO, Online Marketing' }, { icon: workIcon, date: '2008 - 2010', title: 'Web Designer', subtitle: 'Los Angeles, CA', desc: 'User Experience, Visual Design' }, { icon: workIcon, date: '2006 - 2008', title: 'Web Designer', subtitle: 'San Francisco, CA', desc: 'User Experience, Visual Design' }, { icon: schoolIcon, date: 'April 2013', title: 'Content Marketing for Web, Mobile and Social Media', subtitle: 'Online Course', desc: 'Strategy, Social Media' }, { icon: schoolIcon, date: 'November 2012', title: 'Agile Development Scrum Master', subtitle: 'Certification', desc: 'Creative Direction, User Experience, Visual Design' }, { icon: schoolIcon, date: '2002 - 2006', title: 'Bachelor of Science in Interactive Digital Media Visual Imaging', subtitle: 'Bachelor Degree', desc: 'Creative Direction, Visual Design' }, { icon: starIcon } ]; // ... // ... |
3. Render timeline component
First, Import the package and CSS on top of the page. Use the following code.
1 2 | import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'; import 'react-vertical-timeline-component/style.min.css'; |
Now simply use the following code to draw the timeline in React component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <VerticalTimeline> {timeline.map((t, i) => { const contentStyle = i === 0 ? { background: 'rgb(33, 150, 243)', color: '#fff' } : undefined; const arrowStyle = i === 0 ? { borderRight: '7px solid rgb(33, 150, 243)' } : undefined; return <VerticalTimelineElement key={i} className="vertical-timeline-element--work" contentStyle={contentStyle} contentArrowStyle={arrowStyle} date={t.date} {...t.icon} > {t.title ? <React.Fragment> <h3 className="vertical-timeline-element-title">{t.title}</h3> {t.subtitle && <h4 className="vertical-timeline-element-subtitle">{t.subtitle}</h4>} {t.desc && <p>{t.desc}</p>} </React.Fragment> : undefined} </VerticalTimelineElement> })} </VerticalTimeline> |
4. Output
Let’s combine all code together and see how it looks.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import React from 'react'; import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'; import 'react-vertical-timeline-component/style.min.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBriefcase, faSchool, faStar } from '@fortawesome/free-solid-svg-icons'; const workIcon = { icon: <FontAwesomeIcon icon={faBriefcase} />, iconStyle: { background: 'rgb(33, 150, 243)', color: '#fff' } }; const schoolIcon = { icon: <FontAwesomeIcon icon={faSchool} />, iconStyle: { background: 'rgb(233, 30, 99)', color: '#fff' } }; const starIcon = { icon: <FontAwesomeIcon icon={faStar} />, iconStyle: { background: 'rgb(16, 204, 82)', color: '#fff' } }; function App() { const timeline = [ { icon: workIcon, date: '2011 - present', title: 'Creative Director', subtitle: 'Miami, FL', desc: 'Creative Direction, User Experience, Visual Design, Project Management, Team Leading' }, { icon: workIcon, date: '2010 - 2011', title: 'Art Director', subtitle: 'San Francisco, CA', desc: 'Creative Direction, User Experience, Visual Design, SEO, Online Marketing' }, { icon: workIcon, date: '2008 - 2010', title: 'Web Designer', subtitle: 'Los Angeles, CA', desc: 'User Experience, Visual Design' }, { icon: workIcon, date: '2006 - 2008', title: 'Web Designer', subtitle: 'San Francisco, CA', desc: 'User Experience, Visual Design' }, { icon: schoolIcon, date: 'April 2013', title: 'Content Marketing for Web, Mobile and Social Media', subtitle: 'Online Course', desc: 'Strategy, Social Media' }, { icon: schoolIcon, date: 'November 2012', title: 'Agile Development Scrum Master', subtitle: 'Certification', desc: 'Creative Direction, User Experience, Visual Design' }, { icon: schoolIcon, date: '2002 - 2006', title: 'Bachelor of Science in Interactive Digital Media Visual Imaging', subtitle: 'Bachelor Degree', desc: 'Creative Direction, Visual Design' }, { icon: starIcon } ]; return ( <div className="App"> <h3>Create a vertical timeline component in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener">Clue Mediator</a></h3> <VerticalTimeline> {timeline.map((t, i) => { const contentStyle = i === 0 ? { background: 'rgb(33, 150, 243)', color: '#fff' } : undefined; const arrowStyle = i === 0 ? { borderRight: '7px solid rgb(33, 150, 243)' } : undefined; return <VerticalTimelineElement key={i} className="vertical-timeline-element--work" contentStyle={contentStyle} contentArrowStyle={arrowStyle} date={t.date} {...t.icon} > {t.title ? <React.Fragment> <h3 className="vertical-timeline-element-title">{t.title}</h3> {t.subtitle && <h4 className="vertical-timeline-element-subtitle">{t.subtitle}</h4>} {t.desc && <p>{t.desc}</p>} </React.Fragment> : undefined} </VerticalTimelineElement> })} </VerticalTimeline> </div> ); } export default App; |
Run the application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
