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

Output - How to create a vertical timeline component in React - Clue Mediator

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

Install dependency
Prepare data to render in timeline
Render timeline component
Output

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.

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.

// ...
// ...

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 }
];

// ...
// ...
</fontawesomeicon></fontawesomeicon></fontawesomeicon>

3. Render timeline component

First, Import the package and CSS on top of the page. Use the following code.

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.

<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} class="vertical-timeline-element--work" contentstyle={contentStyle} contentarrowstyle={arrowStyle} date={t.date} {...t.icon}="">
      {t.title ? <react class="fragment">
        <h3 class="vertical-timeline-element-title">{t.title}</h3>
        {t.subtitle && <h4 class="vertical-timeline-element-subtitle">{t.subtitle}</h4>}
        {t.desc && <p>{t.desc}</p>}
      </react> : undefined}
    </verticaltimelineelement>
  })}
</verticaltimeline>

4. Output

Let’s combine all code together and see how it looks.

App.js

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 class="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} class="vertical-timeline-element--work" contentstyle={contentStyle} contentarrowstyle={arrowStyle} date={t.date} {...t.icon}="">
            {t.title ? <react class="fragment">
              <h3 class="vertical-timeline-element-title">{t.title}</h3>
              {t.subtitle && <h4 class="vertical-timeline-element-subtitle">{t.subtitle}</h4>}
              {t.desc && <p>{t.desc}</p>}
            </react> : undefined}
          </verticaltimelineelement>
        })}
      </verticaltimeline>
    </div>
  );
}

export default App;
</fontawesomeicon></fontawesomeicon></fontawesomeicon>

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project