React Integration

Simple React component

For a fixed emoji or flag, render a normal image element. This works with client-rendered React and server rendering:

export function Reaction() {
  return (
    <img
      src="https://softhoursdiary-emojis.pages.dev/[emojis/svg/1f632.svg"
      alt="Surprised face"
      width={36}
      height={36}
      loading="lazy"
      decoding="async"
    />
  );
}

Dynamic IDs with the JSON API

When an emoji ID comes from props or application data, resolve it through the JSON endpoint:

"use client";

import { useEffect, useState } from "react";

const CDN = "https://softhoursdiary-emojis.pages.dev";

export function DynamicEmoji({ id }) {
  const [src, setSrc] = useState("");

  useEffect(() => {
    const params = new URLSearchParams({
      type: "emoji",
      id,
      quality: "svg"
    });
    let cancelled = false;

    async function load() {
      const response = await fetch(
        CDN + "/api/v1/asset?" + params
      );
      const result = await response.json();

      if (!response.ok || !result.ok) {
        throw new Error(result.error?.message || "Asset lookup failed.");
      }
      if (!cancelled) setSrc(result.data.url);
    }

    load().catch(console.error);
    return () => { cancelled = true; };
  }, [id]);

  return src ? (
    <img src={src} alt="Reaction" width={36} height={36} />
  ) : null;
}

Choosing asset types

SSR and caching

A fixed direct image URL can be rendered on the server without accessing window. For dynamic server-rendered assets, call the JSON resolver from a Server Component and pass result.data.url to the rendered image. Cache the resolver response when the same asset is reused.

Use meaningful alt text and explicit dimensions to reduce layout shift. See the REST guide for the complete response schema.