@stringpush/react

React 18+ bindings for @stringpush/sdk.

Install

pnpm add @stringpush/react @stringpush/sdk react

Usage

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

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

function Greeting() {
  const { t, locale, setLocale, isReady } = useTranslation();

  if (!isReady) {
    return <p>Loading translations…</p>;
  }

  return (
    <div>
      <p>{t("common.greeting")}</p>
      <p>{t("common.welcome", { name: "Ada" })}</p>
      <Trans i18nKey="items.count" values={{ count: 3 }} />
      <button type="button" onClick={() => void setLocale("fr")}>
        Locale: {locale}
      </button>
    </div>
  );
}

TranslationProvider calls init() on mount and destroy() on unmount. It wires onLocaleChange and onTranslationsUpdated from the SDK so components re-render when the catalog or locale changes.

Overlay / edit mode

Overlay, WebSocket sync, and registerResolver stay on @stringpush/sdk. Pass editLauncher, editToken, and related fields through TranslationProvider props (same as init()), or import helpers directly:

import { enableEditMode, registerResolver } from "@stringpush/react";

See Staging overlay.

API

| Export | Description | |--------|-------------| | TranslationProvider | Wraps the app; runs SDK lifecycle | | useTranslation() | { t, locale, setLocale, isReady } | | Trans | JSX helper for t(i18nKey, values) |

Re-exports SDK types (InitOptions, etc.) and overlay helpers.

Related

• React integration guide
• Getting started

Report vulnerabilities to [email protected].