React

Use @stringpush/react for React 18+ apps.

pnpm add @stringpush/react @stringpush/sdk react

import { TranslationProvider, useTranslation } from "@stringpush/react";

export function App() {
  return (
    <TranslationProvider
      applicationId="<uuid>"
      environment="staging"
      locale="en"
      apiKey="trt_…"
      apiBaseUrl="https://api.platform.stringpush.com"
      origin={window.location.origin}
    >
      <Home />
    </TranslationProvider>
  );
}

function Home() {
  const { t, isReady } = useTranslation();
  if (!isReady) return null;
  return (
    <>
      <h1>{t("common.greeting")}</h1>
      <p>{t("common.welcome", { name: "Ada" })}</p>
    </>
  );
}

ICU values

import { Trans } from "@stringpush/react";

<Trans i18nKey="common.welcome" values={{ name: "Ada" }} />;

See ICU interpolation.

Overlay (staging)

Pass editLauncher or editToken props on TranslationProvider — same options as plain init(). Overlay code loads from @stringpush/sdk.

Next.js

Server Components cannot call init(). See Next.js.