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.
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!
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.