Skip to content

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:

PropertyTypeDescription
namestringA descriptive name or alt text for the media.
sourceobjectAn object containing the URL of the media.
typestringThe type of media: IMAGE or VIDEO.

source Object

PropertyTypeDescription
urlstringThe 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

jsx
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;

Timeline with Embedded Images

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)

jsx
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;

Timeline with Embedded Video

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

Released under the MIT License.