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

Before starting to write code we will need to define a file structure according to the needs of our project, in this case we will only have a couple of components and we will simply put them in a component folder; in case you want to reuse this component using other data sources you could create a ui folder inside components and put it there. Let’s see which will be the structure of files for the project:

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:

Often, using fonts instead of images reduce drastically the weight of our page and therefore increase the loading speed, also this adds greater versatility to manipulate the code when designing our page.

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

In this example we will import the file data.json with the list of companies to be displayed in our component. In another stage you would probably have to get this information from a web service and define a strategy to invoke it and manage the result.

JSON file with timeline elements

Written the component

The component receives the list of elements as a prop and it is traversed to render each element:

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

• Just two things, import the data file:

import data from '../data/data.json'

• invoke the component

<TimeLine data={data} />

CSS attack!

Component Reactjs CSS

Now our component looks like this:

Let’s test it!

We will run the following testing-library test suite:

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:

run the app!

yarn start

and that’s all!

Code

See the code of this project in my github.