Flip Layout

The flipLayout prop allows you to flip the layout of the timeline in both vertical and vertical_alternating modes. By default, the timeline is displayed in a left-to-right format, with the timeline events displayed from left to right. However, in some cases, it may be necessary to display the timeline from right to left, such as in right-to-left (RTL) layouts.

Usage

import React from 'react';
import { Chrono } from 'react-chrono';

const events = [
  {
    title: 'Event 1',
    date: 'January 1, 2022',
  },
  {
    title: 'Event 2',
    date: 'February 1, 2022',
  },
  {
    title: 'Event 3',
    date: 'March 1, 2022',
  },
];

function MyComponent() {
  return (
    <Chrono items={events} flipLayout />
  );
}

In this example, the timeline is displayed in reverse order, with Event 3 displayed first, followed by Event 2, and then Event 1.

Vertical flipped

Vertical alternating flipped