react-crono

A timeline component for React

Features

• Timeline modes - The component supports multiple modes to layout the timeline either Vertically or Horizontally.
• Tree Mode - In Tree mode the individual timeline content boxes are alternated between left and right.
• Timeline QuickScroll - The QuickScroll allows to jump through the Timeline items swiftly. QuickScroll is by default enabled on all the Modes.
• Slideshow - The Slideshow starts the component in Slideshow mode. The component automatically plays the series for you.
• QuickJump - Quickly jump to the start or end of the timeline by using the HOME or END key.
• Keyboard Support - The timelines can be navigated with the UP , DOWN keys in vertical or tree mode. In horizontal mode LEFT , RIGHT keys can be used for navigation.

Installation

yarn install react-crono

Getting Started

react-crono has some great defaults to get you started quickly.

  const items = [{
    title: "May 1940",
    contentTitle: "Dunkirk",
    contentText:"Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
    contentDetailedText: "On 10 May 1940, Hitler began his long-awaited offensive in the west by invading neutral Holland and Belgium and attacking northern France...",
  }, ...];

  <Crono items={items} />

Tree

react-crono also supports a Tree mode.

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

Slideshow

  <Crono
    items={items}
    mode="TREE"
    slideShow
  />

Props

name	description	default
mode	sets the layout for the timeline component. can be HORIZONTAL, VERTICAL or TREE	HORIZONTAL
disableNavOnScroll	disables timeline navigation through mouse scroll	false
disableNavOnKey	disables timeline navigation through keyboard	false
slideShow	starts the timeline in slideshow
slideItemDuration	delay between timeline points during a slideshow	2500
titlePosition	sets the position of the title in HORIZONTAL mode	TOP
itemWidth	width of the timeline section in HORIZONTAL mode	320

Built with

• ReactJS - The Component is written in React and Typescript.

Meta

Prabhu Murthy – @prabhumurthy2 – [e-mail]

Distributed under the MIT license. See LICENSE for more information.

https://github.com/prabhuingoto/