Build a Timeline Component With React and React-Chrono

Everyone loves a good timeline

React-Chrono timeline component — Source: https://react-chrono.vercel.app/

If you have ever been asked to build a company timeline that displays events chronologically, you’ve found the right article.

This article shows you how you can build a timeline component using React and React-Chrono.

In case you’re not sure, the timeline component displays a list of events in chronological order. This is useful for displaying events and also for illustration purposes.

The greatest quality about open source is all the time you save by reusing components and packages, which are provided by the community.

Instead of reinventing the wheel, you save the hassle and time. Focus on what matters, building the product or application.

React-Chrono Includes the Following Features Out-of-the-Box

Here’s a list of what the React-Chrono package can do and key technologies it’s built on.

React-Chrono Github — Source: https://github.com/prabhuignoto/react-chrono

• Render timelines in three different modes (horizontal, vertical, tree) — Scroll below to see examples.
• Use the Tree mode to layout the timeline cards vertically in a tree-like fashion.

In tree mode, the component will be rendered vertically, with cards alternating between left and right.

• Autoplay the timeline with slideshow mode.
• You can navigate the React-Chrono timeline via the keyboard.
• You can quick-jump to the start or the end of the timeline with the HOME or END keys.
• React-Chrono is built with using Typescript.
• React-Chrono is powered behind the scenes by styled-components.

Getting Started

You can install the React-Chrono package via the npm or Yarn package manager.

yarn install react-chrono

Usage