Snabbstart
React + i18next
Installera SDK:n, lägg din app i <SonentaProvider /> och anropa useTranslation(). Saknade nycklar går automatiskt till din dashboard — ingen extra koppling.
1. Installera
En enda dependency. Ingen peer-dep-akrobatik — SDK:n innehåller allt på React-sidan.
terminal 1npm i @sonenta/react-i18next2. Linda din app
SonentaProvider tar en projectId och en apiKey. Allt annat har rimliga defaults: locale auto-detekteras från webbläsaren, namespaces laddas lazy från ditt CDN, missing-key-handler debouncas och POST:as automatiskt.
main.tsx 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); Alla SonentaProvider-props
| Prop | Typ | Default |
|---|---|---|
| projectUuid | string | — krävs |
| token | string | — krävs |
| 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. Använd hooken
useTranslation() returnerar { t, i18n }. Bekant form om du använt react-i18next. i18n.ready säger när de initiala namespacen är hydrerade; i18n.changeLanguage() byter locale i runtime.
Checkout.tsx 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}Vad du får gratis
- Fångst av saknade nycklar. Varje nyckel du anropar som inte finns i ordlistan köas, debouncas (5s default) och POST:as till dashboardens missing-kö. Produktionssäkert — din fallback renderas fortfarande.
- Namespaces via CDN. Översättningsbuntar hämtas från
cdn.sonenta.commed HTTP-caching och stale-while-revalidate. Ingen build-time-bundling krävs. - Auto-detekterad locale. Om du inte skickar
defaultLocaleläser SDK:nnavigator.languageoch faller tillbaka på projektets default. - Öppna exporter. Allt du pushar till Sonenta kan du exportera tillbaka till JSON i18next, XLIFF eller PO. Byt verktyg imorgon utan att skriva om koden.
Egen transport (avancerat)
Behöver du logga saknade nycklar till din egen observability-stack, gate:a dem bakom din auth eller stub:a dem i tester? Skicka in en transport-funktion. SDK:n debouncar och batchar fortfarande; du bestämmer vad som händer med batchen.
main.tsx 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/>