@verbx/localize-react

The React SDK for VerbX Localize — install one package, wrap your app, and the text your users read is translated with no translation files and no keys to invent.

npm install @verbx/localize-react

import { VerbXProvider, useT } from "@verbx/localize-react";

function Root() {
  return (
    <VerbXProvider
      config={{
        apiKey: "vx_…",
        projectKey: "proj_…",
        supportedLocales: ["en", "es", "hi"],
      }}
    >
      <App />
    </VerbXProvider>
  );
}

// anywhere below the provider — the English string IS the key:
function Cart() {
  const t = useT();
  return <h1>{t("Your cart")}</h1>;
}

That is the whole integration. There is no key to name and no file to keep in sync — the source string identifies the translation everywhere.

What you get

• <VerbXProvider config={…}> — wraps your app. apiKey and projectKey are required.
• useT() — returns t(source, options?). Synchronous, never throws. On a backend problem your users see the source language, never a spinner and never a crash.
• <T> — a component form for JSX children, with vars, count (plurals), and context.
• useLocale() — the current locale and setLocale(locale) to change it.
• useVerbX() — the underlying client, for advanced use.

Context, when the same word means two things

“Apply” on a coupon field is not “Apply” on a job posting. Pass structural context and they become two separately translated strings:

<T context={{ componentType: "Button", parentLabel: "Coupon code" }}>Apply</T>

The SDK sends the placeholder token, never the value, so interpolated data stays on the device:

<T vars={{ name: user.firstName }}>Hi {"{name}"}</T>

Docs

Full guide, the CLI, and the GitHub agent: localize.verbxeco.com — the Docs section is readable without an account.

License

Proprietary. See LICENSE.md and the VerbX terms of service.