React timeline component

created: 2 months ago
updated: 2 months ago
new
  • practice
  • challenge

Intro

Discover the process of creating a react timeline component and increase your developer skills.

In the frontend world, you need to practice so that you don't lose flexibility in writing code. I like to pick a specific problem and solve it. It doesn't have to be big, as long as it's a challenge.
I recommend you this approach. It is especially good if you feel stagnant in the project or are beginning to program.
So let's move on to today's little challenge, in which you will create a component for visualizing articles on the timeline and you will call it
react timeline component
.
Someone once said - "If you are not moving forward you are moving backward".
You can find inspiration for similar components on
Pinterest
, and for algorithmic tasks I recommend
Codewars
.
1. How react timeline component will work?
It will be a presentational component to which we will pass data and instructions for displaying the elements.
2. Legend
Before you start to work, determine which elements your component will consist of. This is helpful later when naming variables.
3. Positioning method
The layout of the component is a bit non-standard. So using a grid or flexbox, in this case, will be very difficult or impossible.
Use good old
position: absolute
and
transform: translate(a,b)
to define the position of the elements.
Transform
instead of
top | right | bottom | left
properties will guarantee you better animation performance.
More about animations on
web.dev
.
4. Inline styles???
Why do you use inline styles? First, for code consistency. Most of the styles are calculated dynamically, so using class names and inline styles is not very consistent.
Secondly, snapshots of the tests which you will use later, compare real styles, not class names.
Lastly, the component will work in any
React
project without the need to install additional packages or attach styles.
5. API design
Below is an example of the use of your future component.
Now you know what your component will accept. It's time to create types for data.
Now it's time to model the components.
Your component will also take a
setup
prop which specifies sizes and distances between elements.
Finally, an example of an object that you can pass to a component, but it is not required. The component will use the default implementation.
5. Generating sample data
How can you guarantee the convenience of manual component testing? All you need to do is to create functions for generating data and create several sets for different cases.
Now you can display
react timeline component
in various configurations and test it manually to see if it works as expected.
6. Implementing container
Firstly, we count the maximum number of elements on the top and bottom. This is needed for height calculation.
Then you must create a component with 2 simple divs and some base styles.
You calculate the height based on the
setup
object and the
maximum number of elements
on the top and bottom. Now you can use the created component, which will adjust the height based on the amount of data.
7. Implementing lineX
In this component, you will implement the center line. You need to calculate the width of the line and distance from the top.
Pay attention to the width and top - it's dynamically calculated like height in a container. You used
transform
to move it from the top.
8. Implementing markers
Each marker must have a distance to the left based on the
group index, setup object
and
orientation
.
Now you need to use the new component in
Timeline.tsx
. Just use the dataset and provide the required information to calculate the position of the marker at each iteration.
In addition, several conditional instructions will allow you to modify what is visible.
9. Rendering of the y-line
Similarly to markers, you must calculate the distance from the left side and the top/bottom depending on the orientation.
Moreover, you also need the height, which will vary depending on the items count in the group.
Now use the
LineY
component in
Timeline
.
10. Rendering group items
This is the final step. All you need to do is to create a
GroupItem
component, which will take care of displaying the
avatar
and the
title
.
As before, we need to calculate the distances depending on the group/item indexes.
Now use the
GroupItem
component in
Timeline
.
Then use the generated data for testing in the
App
component.
Bonus!
If you'd like to start to refactor or improve performance - you can use
jest snapshot testing
technique.
Just create a file
Timeline.test.tsx
and add this code.
Then run
npm run test
which will generate a snapshot file. This file is like a "checkpoint" in games. If you change the code, and this change affects the styles that are crucial to the operation of this component, you will be informed about it.
Snapshot tests do not work on
codesandbox
. Download the repository and run it in your
IDE
to test this mechanism.
I hope you enjoyed this tutorial 🙂. Remember that practice makes perfect and brings fun.
Feel free to contact me if you have any questions/proposals. Have a nice day and good health!