React timeline component

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 .

Someone once said - "If you are not moving forward you are moving backward".

You can find inspiration for similar components on , and for algorithmic tasks I recommend .

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 and to define the position of the elements.

instead of properties will guarantee you better animation performance.

More about animations on .

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 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 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 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 object and the 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 to move it from the top.

8. Implementing markers

Each marker must have a distance to the left based on the and .

Now you need to use the new component in . 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 component in .

10. Rendering group items

This is the final step. All you need to do is to create a component, which will take care of displaying the and the .

As before, we need to calculate the distances depending on the group/item indexes.

Now use the component in .

Then use the generated data for testing in the component.

Bonus!

If you'd like to start to refactor or improve performance - you can use technique.

Just create a file and add this code.

Then run 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 . Download the repository and run it in your 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!