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