Show

A simple component that allows scheduling when element should be added. It allows specifying timestamp or delay after mount.

This functionality is primarily useful for offline processing. For live cases the same functionality can be easily reproduced with useEffect+setTimeout.

Usage

ShowExample.tsx

import { Mp4, Show, Tiles } from "@swmansion/smelter";
import { OfflineSmelter } from "@swmansion/smelter-node";

function ExampleApp() {
  return (
    <Tiles
      style={{ backgroundColor: "#52505b" }}
      transition={{ durationMs: 300 }}>
      <Mp4 source="https://example.com/video1.mp4" />
      <Show delayMs={2000}>
        <Mp4 source="https://example.com/video2.mp4" />
      </Show>
      <Show timeRangeMs={{ start: 5000, end: 8000 }}>
        <Mp4 source="https://example.com/video3.mp4" />
      </Show>
    </Tiles>
  );
}

async function run() {
  const smelter = new OfflineSmelter();
  await smelter.init();

  await smelter.render(<ExampleApp />, {
    type: "mp4",
    serverPath: "./output.mp4",
    video: {
      encoder: {
        type: "ffmpeg_h264",
        preset: "ultrafast",
      },
      resolution: {
        width: 1920,
        height: 1080,
      },
    },
  });
}
void run();

Example output

Reference

Type definitions

type ShowProps = {
  children: ReactNode;
  timeRangeMs?: { start?: number; end?: number };
  delayMs?: number;
};

Props

Either timeRangeMs or delayMs has to be specified.

children

Content to be displayed if condition specified by timeRangeMs or delayMs are met.

• Type: ReactNode

timeRangeMs

Time range defined by start and end timestamps. At least on of them needs to be defined.

• Type: { start?: number; end?: number }

---

delayMs

Duration after Show component is mounted when children components will be visible.

• Type: number
• Default value: 1