Embedding Media

React Chrono supports embedding various media types like images and videos directly into timeline cards using the media property within each timeline item object.

Media Object Properties

The media object has the following structure:

Property	Type	Description
name	string	A descriptive name or alt text for the media.
source	object	An object containing the URL of the media.
type	string	The type of media: IMAGE or VIDEO.

source Object

Property	Type	Description
url	string	The URL of the media file.

Embedding Images

To display an image in a timeline card, provide a valid image URL within the media.source.url property and set media.type to IMAGE.

Example: Image Embedding

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

const itemsWithImages = [
  {
    title: "May 1940",
    cardTitle: "Dunkirk Evacuation",
    media: {
      name: "Dunkirk beach during evacuation",
      source: {
        url: "https://i2-prod.mirror.co.uk/incoming/article10847802.ece/ALTERNATES/s810/PAY-Dunkirk-in-colour.jpg",
      },
      type: "IMAGE",
    },
    cardSubtitle: "British Expeditionary Force (BEF) evacuating from Dunkirk.",
    cardDetailedText: "On 10 May 1940, Germany launched an offensive in the west. Allied forces, including the BEF, were pushed back to Dunkirk, leading to a massive sea evacuation.",
  },
  {
    title: "July 1940",
    cardTitle: "The Battle of Britain Begins",
    media: {
      name: "RAF Spitfires during the Battle of Britain",
      source: {
        url: "https://thumbs-prod.si-cdn.com/NbOmrVrVAO-uSo0O8kVNdpqVyCk=/800x600/filters:no_upscale()/https://public-media.si-cdn.com/filer/c6/b0/c6b0f904-ae9c-47e5-86a9-493dfaefd43c/spitfire_1.jpg",
      },
      type: "IMAGE",
    },
    cardSubtitle: "RAF Spitfire pilots scramble for their planes.",
    cardDetailedText: "After France's surrender, Britain stood alone. The Luftwaffe aimed to achieve air superiority for an invasion. The RAF defended British skies in what became known as the Battle of Britain.",
  },
];

function ImageTimeline() {
  return <Chrono items={itemsWithImages} mode="VERTICAL" />;
}

export default ImageTimeline;

Embedding Videos

React Chrono allows embedding videos from YouTube or local video files. To embed a video, provide the video URL (e.g., a YouTube embed URL or a direct link to a video file) in media.source.url and set media.type to VIDEO.

Example: Video Embedding (YouTube)

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

const itemsWithVideo = [
  {
    title: "July 1940",
    cardTitle: "The Battle of Britain",
    media: {
      name: "Battle of Britain documentary excerpt",
      source: {
        url: "https://www.youtube.com/embed/gPMgYC0sXos", // YouTube embed URL
      },
      type: "VIDEO",
    },
    cardSubtitle: "Documentary footage of the Battle of Britain.",
    cardDetailedText: "The Battle of Britain was a pivotal air campaign fought between the Royal Air Force (RAF) and the German Luftwaffe. This video provides insights into the conflict.",
  },
];

function VideoTimeline() {
  return <Chrono items={itemsWithVideo} mode="VERTICAL" />;
}

export default VideoTimeline;

By utilizing the media property, you can enrich your timelines with relevant images and videos, making them more engaging and informative.