Перейти к содержимому
Verbumia

REST API

React + i18next

Полный API reference автоматически сгенерируется из нашей OpenAPI 3.1 spec, как только поверхность стабилизируется. Лучше зашипить плейсхолдер, чем фейк-документировать эндпоинты, которые ещё могут двигаться. А пока — вот форма, что она покроет, и что делать сегодня.

Установка

Требуется <strong>Node 20 LTS</strong> или новее. Ставится два бинарника: <code>verbumia</code> и короткий алиас <code>vrb</code> — взаимозаменяемы.

terminal
1npm i @verbumia/react-i18next

2. Оберни приложение

VerbumiaProvider принимает projectId и apiKey. Всё остальное по умолчанию: автоопределение локали из браузера, namespace'ы лениво загружаются с CDN, обработчик пропущенных ключей с debounce и автоматическим POST.

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);
Все props VerbumiaProvider
Prop Тип По умолчанию
projectIdstring— обязательно
apiKeystring— обязательно
defaultLocalestringbrowser
defaultNSstring"common"
namespacesstring[]["common"]
cdnUrlstringcdn.verbumia.ca
baseUrlstringapi.verbumia.ca
missingHandlerEndpointstring/v1/missing
debounceMsnumber5000
transport(batch) => void | Promise<void>internal

3. Используй хук

useTranslation() возвращает { t, i18n }. Знакомая форма, если ты работал с react-i18next. i18n.ready сообщает, когда стартовые namespace'ы загрузились; i18n.changeLanguage() меняет локаль в рантайме.

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}

Что ты получаешь бесплатно

Кастомный транспорт (advanced)

Нужно логировать пропущенные ключи в свой стек наблюдаемости, прятать их за своей авторизацией или мокать в тестах? Передай функцию transport. SDK всё так же делает debounce и батчит; что делать с батчем — решаешь ты.

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

Дальше