Modern Timeline Component For React – Chrono

Chrono is a modern timeline component for React app that allows you to navigate between events just like a slider or slideshow.

More Features:

• Render timelines in three different modes (Horizontal, Vertical, Tree).
• Use the Tree mode to layout the timeline cards vertically in a tree like fashion.
• Auto play the timeline with the slideshow prop.
• Navigate the timelines via Keyboard.
• Customize colors with ease.

Install & Import:

# Yarn
$ yarn add react-chrono

# NPM
$ npm i react-chrono –save

Basic usage:

1. Create events for the timeline:

const items = [{
      title: "Nov 1981",
      contentTitle: "Title 1",
      contentText: "Content 1",
      contentDetailedText: "Detailed Content 1",
      }, {
      title: "Nov 2000",
      contentTitle: "Title 2",
      contentText: "Content 2",
      contentDetailedText: "Detailed Content 2",
      },{
      title: "Nov 2020",
      contentTitle: "Title 3",
      contentText: "Content 3",
      contentDetailedText: "Detailed Content 3",
      },...
];

2. Create a horizontal timeline.

<Chrono items={items} mode="HORIZONTAL" />

3. Create a vertical timeline.

<Chrono items={items} mode="VERTICAL" />

4. Create a tree style timeline.

<Chrono items={items} mode="TREE" />

Default props:

items,
itemWidth = 300,
titlePosition = "TOP",
mode = "HORIZONTAL",
disableNavOnScroll = false,
disableNavOnKey = false,
slideShow = false,
slideItemDuration = 2500,
theme = {
  primary: "#0f52ba",
  secondary: "#ffdf00",
},

Preview:

Download Details:

Author: prabhuignoto

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/prabhuignoto/react-chrono

License: MIT