⭐ React timeline component

Intro

Let's implement the timeline component in React. We'll calculate styles in real time and we'll memoize calculations to save some performance.

Prelude

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.

Summary

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!