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 onPinterest, 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.
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
transform: translate(a,b)to define the position of the elements.
top | right | bottom | leftproperties 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
Reactproject 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
setupprop 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 componentin 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
setupobject and the
maximum number of elementson 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
transformto move it from the top.
8. Implementing markers
Each marker must have a distance to the left based on the
group index, setup objectand
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
10. Rendering group items
This is the final step. All you need to do is to create a
GroupItemcomponent, which will take care of displaying the
As before, we need to calculate the distances depending on the group/item indexes.
Now use the
Then use the generated data for testing in the
If you'd like to start to refactor or improve performance - you can use
jest snapshot testingtechnique.
Just create a file
Timeline.test.tsxand add this code.
npm run testwhich 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
IDEto 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!