Building a Simple timeline React component

How to create a timeline component step by step

In this tutorial we are going to create a vertical timeline component in React using the font Awesome Icons and data from a JSON file. A timeline is a graphical representation that allows you to see and understand time sequences between events, for example, you could represent the seasons in the southern hemisphere, the evolution of the computer, your work experience, the phases of a project, etc. In this case, our component will display a list of technology companies and a brief comment on each one.

Organizing your project files

timeline-app
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── components
│ │ ├── timeline
│ │ │ ├── timeline.css
│ │ │ ├── timeline.js
│ │ │ └── timeline.test.js
│ │ │ └── index.js
│ │ ├── header
│ │ │ ├── header.css
│ │ │ ├── header.js
│ │ │ └── index.js
│ │ └── index.js│
│ ├── pages
│ │ ├── home.js
│ ├── data
│ │ ├── data.json

│ ├── index.js
│ ├── registerFaIcons.js
│ ├── setupTests.js

│ └── service-worker.js
├── .gitignore
└── package.json

In the component directory src/components/timeline we have an index.js file that allows importing the component from the containers without specifying the name of the file that implements the component.

Adding the font library:

In this component we will use the sources of Font Awesome that comes with the logos of the companies that we require, add the dependencies to our project:

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome
npm install --save @fortawesome/free-brands-svg-icons

I have created a script that will be invoked to register the sources from the normal execution and the execution of the tests:

Data input

JSON file with timeline elements

Written the component

const content = data.map((item, index) => <div  key={item.id}>

From there, the side elements will be created or not, while the middle line will always be written. Notice that the line:

<div className="clearfix"></div>

clear floated content within a container, so that the middle circle is painted only once per record.

Page

import data from '../data/data.json'
  • invoke the component
<TimeLine data={data} />

CSS attack!

Component Reactjs CSS

Now our component looks like this:

Image for post
Image for post

Let’s test it!

in our setupTest.js file we must invoke the registerFaIcons() method so that the execution of the test does not throw errors in the loading of the sources.

run the following command in the console:

yarn test

if everything went well we should see something like this:

testing-library result
testing-library result

run the app!

yarn start

and that’s all!

Timeline reactjs component
Timeline reactjs component

Code

Software developer, passionate about technology, walker, interested in learning and creating fantastic things.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store