React Integration Guide

Add reusable emoji and flag components to React without another runtime dependency. The adapter returns normal image elements.

Public CDNHelper v1.0.0No API key

Install or import the helper

For a client-rendered React or Vite app, load the UMD helper once from your HTML entry. You can also download both helper files and import the local ESM module from your project.

<script defer src="https://softhoursdiary-emojis.pages.dev/soft-hours-diary.js"></script>

Create the React adapter

Pass your React object to createReactComponents. It returns specialised Emoji, Flag, FlagIcon components, plus a generic Asset.

import React from "react";

const {
  Emoji,
  Flag,
  FlagIcon,
  Asset
} = window.SoftHoursDiary.createReactComponents(React);

export function Reactions() {
  return (
    <div className="reactions">
      <Emoji id="1f632" quality="svg"
        alt="Surprised face" width={36} height={36} />

      <Flag id="IN" quality="l"
        alt="Flag of India" width={48} height={32} />

      <FlagIcon id="IN" quality="4x3"
        alt="India flag icon" width={48} />

      <Asset type="emoji" id="1f632"
        quality="png" alt="Emoji PNG" />
    </div>
  );
}

Component properties

Prop	Required	Description
`id`	Yes	Emoji code point or flag code. Alias: assetId.
`quality`	No	Format, size or aspect ratio.
`alt`	No	Accessible description; defaults to empty string.
`width`, `height`	No	Image dimensions. Recommended to avoid layout shift.
`loading`	No	Lazy or eager; defaults to lazy.
`decoding`	No	Image decoding mode; defaults to async.
`className`	No	CSS class names for the rendered image.
`baseUrl`	No	Optional HTTP(S) CDN base override.

Local ESM usage with Vite

For static imports and bundler checks, keep both helper files together in src/lib/shd/.

import React from "react";
import SoftHoursDiary from "./lib/shd/soft-hours-diary.esm.mjs";

const { Emoji, Flag } =
  SoftHoursDiary.createReactComponents(React);

export function ReactionBar() {
  return (
    <div>
      <Emoji id="1f632" quality="svg"
        alt="Surprised face" width={32} height={32} />
      <Flag id="IN" quality="l"
        alt="India" width={42} height={28} />
    </div>
  );
}

SSR and hydration

Do not read window while server-rendering. The browser global only exists after the script loads in the browser. For SSR, use local ESM URL helpers and render an ordinary image element.

The adapter renders standard image elements and does not require a provider, hook or runtime fetch request.

When to use direct URLs

For a single fixed emoji, a direct URL is often simpler than an adapter. Use the React components when the ID or quality is dynamic, or when you want the same helper contract across multiple parts of your app.

Download AI context (.md)Interactive playground ↗API reference