React + i18next

Installez le SDK, enveloppez votre app dans <SonentaProvider />, et appelez useTranslation(). Les clés manquantes remontent à votre tableau de bord automatiquement, aucun branchement supplémentaire.

1. Installer

Une seule dépendance. Pas d'acrobaties peer-dep, le SDK contient tout côté React.

npm i @sonenta/react-i18next

2. Envelopper votre app

SonentaProvider prend un projectId et un apiKey. Tout le reste a des défauts raisonnables : détection auto de la locale depuis le navigateur, namespaces chargés à la demande depuis votre CDN, handler de clés manquantes debouncé et POST automatique.

src/main.tsx

import { SonentaProvider } from "@sonenta/react-i18next";
import { createRoot } from "react-dom/client";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <SonentaProvider
    projectUuid="proj_xxx"
    token={import.meta.env.VITE_SONENTA_TOKEN}
    defaultLocale="en"
    namespaces={["common"]}
  >
    <App />
  </SonentaProvider>
);

Toutes les props de SonentaProvider

Prop	Type	Défaut
projectUuid	string	obligatoire
token	string	obligatoire
defaultLocale	string	browser
defaultNS	string	"common"
namespaces	string[]	["common"]
cdnUrl	string	cdn.sonenta.com
baseUrl	string	api.sonenta.com
missingHandlerEndpoint	string	/v1/missing
debounceMs	number	5000
transport	(batch) => void | Promise<void>	internal

3. Utiliser le hook

useTranslation() retourne { t, i18n }. Forme familière si vous avez utilisé react-i18next. i18n.ready indique quand les namespaces initiaux sont hydratés ; i18n.changeLanguage() change la locale à l'exécution.

src/Checkout.tsx

import { useTranslation } from "@sonenta/react-i18next";

export function Checkout() {
  const { t, i18n } = useTranslation("common");

  if (!i18n.ready) return null;  // first paint after hydration

  return (
    <button onClick={() => i18n.changeLanguage("fr")}>
      {t("checkout.review.confirm")}
    </button>
  );
}

Ce que vous obtenez gratuitement

• Capture des clés manquantes. Toute clé que vous appelez sans qu'elle soit au dictionnaire est mise en file, debouncée (5s par défaut), et POST vers la file de votre dashboard. Sans risque en prod, votre fallback continue de s'afficher.
• Namespaces servis depuis le CDN. Les bundles de traduction sont tirés de cdn.sonenta.com avec cache HTTP et stale-while-revalidate. Aucun bundling au build requis.
• Détection auto de la locale. Si vous ne passez pas defaultLocale, le SDK lit navigator.language et retombe sur la valeur par défaut de votre projet.
• Exports ouverts. Tout ce que vous pushez dans Sonenta, vous pouvez le ré-exporter en JSON i18next, XLIFF, ou PO. Changez d'outil demain sans réécrire votre code.

Transport custom (avancé)

Besoin de logger les clés manquantes dans votre propre stack d'observabilité, de les protéger derrière votre auth, ou de les stubber dans les tests ? Passez une fonction transport. Le SDK debounce et batche toujours ; vous décidez ce qu'on fait du batch.

// custom transport: useful for tests, edge cases, or auditing
<SonentaProvider
  projectUuid="proj_xxx"
  token={import.meta.env.VITE_SONENTA_TOKEN}
  debounceMs={2000}
  transport={(batch) => fetch("/internal/i18n-misses", {
    method: "POST",
    body: JSON.stringify(batch),
  })}
/>

Ensuite

• Toutes les docs (Référence) : CLI, serveur MCP, référence API (en cours).
• Plans & limites (Tarifs) : Free 500 clés ; Hobby 9 $ ; Pro 29 $ ; Team 79 $.