Nested Timelines

React Chrono supports creating nested timelines, allowing you to embed a timeline within a card of a parent timeline. This feature is available in all timeline modes (VERTICAL, VERTICAL_ALTERNATING, HORIZONTAL) and is ideal for organizing and displaying complex, hierarchical data.

Data-Driven Nesting

Nested timelines are configured directly within your data. To create a nested timeline, include an items array property within a specific timeline item object of the parent timeline. This inner items array will define the events for the nested timeline, which will then be rendered inside the corresponding parent card.

Example Usage

Here's how to implement a nested timeline:

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

const mainTimelineItems = [
  {
    title: "Main Event - Q1 2023",
    cardTitle: "Project Alpha Kickoff",
    cardSubtitle: "Start of a major initiative",
    // Nested timeline items for this main event
    items: [
      {
        title: "Jan 2023",
        cardTitle: "Phase 1: Planning",
        cardSubtitle: "Initial planning and team formation",
        cardDetailedText: "Detailed planning sessions, resource allocation, and defining project scope.",
        media: {
          type: "IMAGE",
          source: {
            url: "https://picsum.photos/seed/phase1/800/400", // Placeholder image
          },
        },
      },
      {
        title: "Feb 2023",
        cardTitle: "Phase 2: Prototyping",
        cardSubtitle: "Development of initial prototypes",
        cardDetailedText: "Building and testing proof-of-concept models.",
        media: {
          type: "IMAGE",
          source: {
            url: "https://picsum.photos/seed/phase2/800/400", // Placeholder image
          },
        },
      },
    ],
  },
  {
    title: "Main Event - Q2 2023",
    cardTitle: "Project Beta Launch",
    // This item does not have a nested timeline
  }
];

function MyNestedTimeline() {
  return (
    <Chrono
      items={mainTimelineItems}
      mode="VERTICAL"
      nestedCardHeight={250} // Optional: Adjust height of cards within the nested timeline
    />
  );
}

export default MyNestedTimeline;

In this example:

• The "Project Alpha Kickoff" card in the main timeline will contain a nested timeline defined by its items property.
• The "Project Beta Launch" card will render as a standard card since it does not have an items property.

Height Adjustment for Nested Cards

You can control the height of the cards within the nested timeline using the nestedCardHeight prop on the main <Chrono> component. This prop accepts a numerical value representing the height in pixels.

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

Derived Attributes

Certain visual attributes for the nested timeline, such as mediaHeight and contentDetailsHeight, are automatically derived from the parent timeline's configuration. This helps maintain a consistent look and feel between the parent and nested timelines.

Nested timelines offer a powerful way to present detailed sub-events or related information within the context of a larger event, making complex datasets more manageable and understandable.