REST API
React + i18next
Die vollständige API-Referenz wird automatisch aus unserer OpenAPI-3.1-Spec generiert, sobald die Surface stabil ist. Lieber ein Platzhalter als Fake-Doku zu Endpunkten, die sich noch ändern könnten. In der Zwischenzeit hier die Form, was abgedeckt wird, und was du heute tun kannst.
Installieren
Erfordert <strong>Node 20 LTS</strong> oder neuer. Zwei Binaries werden installiert: <code>verbumia</code> und der kürzere Alias <code>vrb</code> — austauschbar.
terminal 1npm i @verbumia/react-i18next2. App umschließen
VerbumiaProvider 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.
main.tsx 1// src/main.tsx2import { VerbumiaProvider } from "@verbumia/react-i18next";3import { createRoot } from "react-dom/client";4import { App } from "./App"; 6createRoot(document.getElementById("root")!).render(7 <VerbumiaProvider8 projectId="proj_xxx"9 apiKey={import.meta.env.VITE_VERBUMIA_KEY}10 defaultLocale="en"11 namespaces={["common"]}12 >13 <App />14 </VerbumiaProvider>15); Alle VerbumiaProvider-Props
| Prop | Typ | Default |
|---|---|---|
| projectId | string | — erforderlich |
| apiKey | string | — erforderlich |
| defaultLocale | string | browser |
| defaultNS | string | "common" |
| namespaces | string[] | ["common"] |
| cdnUrl | string | cdn.verbumia.ca |
| baseUrl | string | api.verbumia.ca |
| missingHandlerEndpoint | string | /v1/missing |
| debounceMs | number | 5000 |
| transport | (batch) => void | Promise<void> | internal |
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.
Checkout.tsx 1// src/Checkout.tsx2import { useTranslation } from "@verbumia/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.verbumia.camit HTTP-Caching und stale-while-revalidate gezogen. Kein Build-Time-Bundling nötig. - Automatische Locale-Erkennung. Übergibst du keine
defaultLocale, liest das SDKnavigator.languageund fällt auf den Default deines Projekts zurück. - Offene Exports. Alles, was du nach Verbumia 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.
main.tsx 1// custom transport — useful for tests, edge cases, or auditing2<VerbumiaProvider3 projectId="proj_xxx"4 apiKey={import.meta.env.VITE_VERBUMIA_KEY}5 debounceMs={2000}6 transport={(batch) => fetch("/internal/i18n-misses", {7 method: "POST",8 body: JSON.stringify(batch),9 })}10/>