React + i18next

1. Installieren

Eine einzige Abhängigkeit. Kein peer-dep-Akrobatik — das SDK bringt alles React-seitig mit.

1npm i @sonenta/react-i18next

2. App umschließen

SonentaProvider erwartet eine projectId und einen apiKey. Alles andere hat sinnvolle Defaults: automatische Locale-Erkennung aus dem Browser, Namespaces lazy aus deinem CDN geladen, Missing-Key-Handler debounced und automatisch per POST gesendet.

1// src/main.tsx2import { SonentaProvider } from "@sonenta/react-i18next";3import { createRoot } from "react-dom/client";4import { App } from "./App"; 6createRoot(document.getElementById("root")!).render(7  <SonentaProvider8    projectUuid="proj_xxx"9    token={import.meta.env.VITE_SONENTA_TOKEN}10    defaultLocale="en"11    namespaces={["common"]}12  >13    <App />14  </SonentaProvider>15);

3. Hook nutzen

useTranslation() gibt { t, i18n } zurück. Vertraute Form, falls du react-i18next kennst. i18n.ready zeigt an, wann die initialen Namespaces hydriert sind; i18n.changeLanguage() wechselt die Locale zur Laufzeit.

1// src/Checkout.tsx2import { useTranslation } from "@sonenta/react-i18next"; 4export function Checkout() {5  const { t, i18n } = useTranslation("common"); 7  if (!i18n.ready) return null;  // first paint after hydration 9  return (10    <button onClick={() => i18n.changeLanguage("fr")}>11      {t("checkout.review.confirm")}12    </button>13  );14}

Was du gratis bekommst

• Missing-Key-Erfassung. Jeder Key, den du aufrufst und der nicht im Dictionary ist, wird in die Queue gestellt, debounced (Default 5s) und in die Missing-Queue deines Dashboards per POST gesendet. Production-safe — dein Fallback rendert weiter.
• Namespaces vom CDN. Übersetzungs-Bundles werden von cdn.sonenta.com mit HTTP-Caching und stale-while-revalidate gezogen. Kein Build-Time-Bundling nötig.
• Automatische Locale-Erkennung. Übergibst du keine defaultLocale, liest das SDK navigator.language und fällt auf den Default deines Projekts zurück.
• Offene Exports. Alles, was du nach Sonenta pushst, kannst du als JSON i18next, XLIFF oder PO zurückexportieren. Morgen das Tool wechseln, ohne Code umzuschreiben.

Eigener Transport (fortgeschritten)

Willst du fehlende Keys in deinen eigenen Observability-Stack loggen, hinter deiner Auth abschotten oder in Tests stubben? Übergib eine transport-Funktion. Das SDK debounced und batched weiterhin; du entscheidest, was mit dem Batch passiert.

1// custom transport — useful for tests, edge cases, or auditing2<SonentaProvider3  projectUuid="proj_xxx"4  token={import.meta.env.VITE_SONENTA_TOKEN}5  debounceMs={2000}6  transport={(batch) => fetch("/internal/i18n-misses", {7    method: "POST",8    body: JSON.stringify(batch),9  })}10/>