How to create a Vertical Timeline View in React

In the ever-evolving landscape of web development, presenting information in an engaging and chronological manner is often essential. This is where timeline views come into play, offering a visually appealing way to showcase events, activities, or stories. If you’re a React enthusiast looking to integrate a dynamic and interactive vertical timeline view into your web application, you’re in the right place. In this comprehensive guide, we’ll take you through the process of creating a captivating timeline view using the power of React. Whether you’re a seasoned developer or just starting your coding journey, join us as we dive into the intricacies of designing, implementing, and enhancing a timeline component that will captivate your users and elevate your web application’s user experience.

Introduction to Vertical Timeline Views

You might have atleast once, viewed a timeline in one place or another. It might be your Shipment Status(Amazon), Project Management(Trello), Deadline on online courses etc. The basic idea behind a timeline widget is to visually represent chronological events or data points in a linear sequence. It offers users a concise and organized view of a series of events, helping them understand the order in which these events occurred or will occur. A timeline widget typically condenses time-related information into a compact space, making it easier for users to grasp the context, relationships, and progression of events.

Enough on Timeline, let’s see how can we build a timeline in React. There are two ways to go about it, one is the DIY way and another one is using the packages provided by the community. If we go about making it ourselves we would have to look into accessibility, responsiveness and functionality all by ourselves. This would be quite time taking and out of the scope of this blog, so we will be using a community developed package, which take cares of the implementation.

Initiate a new React Project (preferrably using Vite) and install this package in your project using the following command:

npm i react-vertical-timeline-component

For people using typescript also run the following command to install the types for this package:

npm i --save-dev @types/react-vertical-timeline-component

Getting Started with Vertical Timeline Component

We know our Timeline component has several breaks, meaning it has several nodes. Each of which displays some information and can have a call to action button. So firstly, let’s prepare the data for our node. For the sake of simplicity, I will create a different file by the name of data.ts and save the data there:

You can duplicate these items to create more items in the list. Following I will provide you a styles.css it simply styles the Timeline Component according to the Theme. Here’s the theme we would be following:

Copy the following CSS file to achieve the following Color Scheme:

Now, that we have our data and styles ready let’s look into how can we use the library we imported. In the main.tsx let’s see how to use it:

This should now look good, you can now see your timeline component in your browser. You will be able to see the following output:

Customizing the Timelime Component

I have already customized the Timeline Component to tailor our needs, but you can customize it further. Like you could change the color for each step, change the icon for each step, have different set of children at every step and so on. The component is mostly customize-able and very easy to customize.

icon: // to change icon
iconStyle: // to change icon style
dateClassName: // to change date text style (use !important to override)
contentStyle: // change card style
contentArrowStyle: // change arrow style

Conclusion

With React’s vertical timelines, you’ve unlocked a visual storyteller’s toolkit. Craft captivating narratives that unfold with each scroll. Now, it’s your turn. Build and share your creations—let your timelines inspire and engage. Your code, your story. Happy coding, and remember to share your journey!

If you liked the format of my blogs feel free to check some of my popular blogs on Flutter:

• Complete Guide to ValueNotifier in Flutter
• Sound Null Safety in Flutter
• StateManagement in Flutter using RiverPod