Image

A component for rendering images:

From external URLs
From a local path on the server hosting a Smelter instance

Usage

import { Image, View } from "@swmansion/smelter";
import Smelter from "@swmansion/smelter-node";

function ExampleApp() {
  return (
    <View style={{ backgroundColor: "#52505b" }}>
      <Image source="https://example.com/image.svg" />
    </View>
  );
}

22 collapsed lines
async function run() {
  const smelter = new Smelter();
  await smelter.init();

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

  await smelter.start();
}
void run();

Example output

Reference

Type definitions

type ImageProps = {
    id?: string;
    imageId?: string;
    source?: string;
}

Props

imageId

ID of an image. It identifies an image registered using a Smelter.registerImage method.

Type: string

source

Url or local path to the mp4 file. Note that the path has to be local to the machine where Smelter server runs.

Type: string

id

ID of a component.

Type: string
Default value: Value produced by useId hook