React + i18next

1. Instalar

Uma única dependência. Sem ginástica de peer-dep — o SDK inclui tudo do lado React.

1npm i @sonenta/react-i18next

2. Envolve a tua app

SonentaProvider recebe um projectId e uma apiKey. Tudo o resto tem defaults sensatos: deteção automática do locale a partir do browser, namespaces carregados a pedido a partir do teu CDN, handler de chaves em falta com debounce e POST automático.

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. Usa o hook

useTranslation() devolve { t, i18n }. Forma familiar se já usaste react-i18next. i18n.ready indica quando os namespaces iniciais estão hidratados; i18n.changeLanguage() troca o locale em runtime.

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}

O que recebes de borla

• Captura de chaves em falta. Qualquer chave que chamares e que não esteja no dicionário é enfileirada, com debounce (5s por defeito) e enviada por POST para a fila de chaves em falta do teu dashboard. Seguro em produção — o teu fallback continua a renderizar.
• Namespaces servidos por CDN. Os bundles de tradução são puxados de cdn.sonenta.com com caching HTTP e stale-while-revalidate. Sem necessidade de bundling em build-time.
• Deteção automática do locale. Se não passares defaultLocale, o SDK lê navigator.language e recai no default do teu projeto.
• Exports abertos. O que enviares para o Sonenta, podes exportar de volta para JSON i18next, XLIFF ou PO. Muda de ferramenta amanhã sem reescrever código.

Transport personalizado (avançado)

Precisas de registar chaves em falta na tua própria stack de observability, escondê-las atrás da tua auth ou simulá-las em testes? Passa uma função transport. O SDK continua a fazer debounce e batching; tu decides o que acontece ao batch.

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/>