Skip to content
On this page

Getting started

What is React-Chrono

react-chrono is a data-driven timeline component built for React. It is a simple, flexible, and easy-to-use component that can be used to render beautiful timelines. It is built with Typescript and is completely customizable. The component supports 3 unique modes: HORIZONTAL, VERTICAL and VERTICAL_ALTERNATING.

Installation

Install react-chrono using npm or yarn:

sh
npm install react-chrono

Or

sh
yarn add react-chrono

Timeline object properties

To create a timeline, you need to pass in an array of timeline objects. Each Timeline object comes with a set of properties that define the Timeline Card.

namedescriptiontype
titletitle of the timeline itemString
cardTitletitle that is displayed on the timeline cardString
cardSubtitletext displayed in the timeline cardString
cardDetailedTextdetailed text displayed in the timeline cardString or String[]
mediamedia object to set image or videoObject
urlurl to be used in the titleString

Timeline modes

react-chrono supports 3 unique modes:

  • HORIZONTAL
  • VERTICAL
  • VERTICAL_ALTERNATING

HORIZONTAL mode is the default mode. If you want to display the timeline cards vertically instead, you can use the VERTICAL or VERTICAL_ALTERNATING.

Building the Timeline

To build the timeline, you need to pass in an array of timeline objects to the items prop.

Let's build a simple vertical timeline with 3 items.

INFO

The default mode of the component is HORIZONTAL.

jsx
<Chrono
  items={[
  {
    title: "May 1940",
    cardTitle: "Dunkirk",
    url: "http://google.com",
    cardSubtitle:
      "Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
    cardDetailedText: `On 10 May 1940, Hitler began his long-awaited offensive in the west by invading neutral Holland and Belgium and attacking northern France. Holland capitulated after only five days of fighting, and the Belgians surrendered on 28 May. With the success of the German ‘Blitzkrieg’, the British Expeditionary Force and French troops were in danger of being cut off and destroyed.`
  },
  {
    title: "25 July 1940",
    cardTitle: "The Battle of Britain",
    cardSubtitle: `RAF Spitfire pilots scramble for their planes`,
    cardDetailedText: `After France’s surrender in June 1940, Churchill told the British people, “Hitler knows that he will have to break us in this island or lose the war”. To mount a successful invasion, the Germans had to gain air superiority. The first phase of the battle began on 10 July with Luftwaffe attacks on shipping in the Channel.
      The following month, RAF Fighter Command airfields and aircraft factories came under attack. Under the dynamic direction of Lord Beaverbrook, production of Spitfire and Hurricane fighters increased, and despite its losses in pilots and planes, the RAF was never as seriously weakened as the Germans supposed.`
  },
  {
    title: "June 1941",
    cardTitle: "Operation Barbarossa",
    cardSubtitle: `A column of Red Army prisoners taken during the first days of the German invasion`,
    cardDetailedText: `Since the 1920s, Hitler had seen Russia, with its immense natural resources, as the principal target for conquest and expansion. It would provide, he believed, the necessary ‘Lebensraum’, or living space, for the German people. And by conquering Russia, Hitler would also destroy the “Jewish pestilential creed of Bolshevism”. His non-aggression pact with Stalin in August 1939 he regarded as a mere temporary expedient.
      Barely a month after the fall of France, and while the Battle of Britain was being fought, Hitler started planning for the Blitzkrieg campaign against Russia, which began on 22 June 1941. Despite repeated warnings, Stalin was taken by surprise, and for the first few months the Germans achieved spectacular victories, capturing huge swathes of land and hundreds of thousands of prisoners. But they failed to take Moscow or Leningrad before winter set in.
      On 5/6 December, the Red Army launched a counter-offensive which removed the immediate threat to the Soviet capital. It also brought the German high command to the brink of a catastrophic military crisis. Hitler stepped in and took personal command. His intervention was decisive and he later boasted, “That we overcame this winter and are today in a position again to proceed victoriously… is solely attributable to the bravery of the soldiers at the front and my firm will to hold out…”`
  }]}
  mode="VERTICAL"
/>

Released under the MIT License.