Bridge UI

i18n

Translate Bridge UI chrome strings with an i18n adapter.

Bridge chrome strings (aria-labels, empty/loading copy) resolve through an optional i18n adapter on BridgeUIProvider (global.i18n). Without an adapter, the English source string is returned as-is.

Lookup is gettext-style: the source English text is the key. Multi-locale adapters can keep the active locale internally via optional setLocale.

const resolveMessage = useResolveMessage();

resolveMessage("Hide password");

useResolveMessage reads the active adapter from context. Interpolation and pluralization are the adapter’s job (i18next, vue-i18n, or a custom t). Bridge setLocale updates global.locale and calls optional adapter.setLocale.

Implement I18nAdapter as a plain object — Bridge only defines the interface.

Import

import { useResolveMessage, type I18nAdapter } from "@bridge-ui/vue";
import { useResolveMessage, type I18nAdapter } from "@bridge-ui/react";

Examples

Copy-paste adapters live in the core repo under packages/{react,vue}/examples/ (not published on npm). Pass the result to global.i18n on BridgeUIProvider. On Vue you can also use createBridgeUI(); in Astro, wire it once via appEntrypoint.

Missing keys fall back to the original English source.

import type { I18nAdapter } from "@bridge-ui/react";

let locale = "en-US";

const i18n: I18nAdapter = {
  setLocale(next) {
    locale = next;
  },
  t(message) {
    // look up message for `locale`, fall back to source
    return message;
  },
};
File Library Replace / plural
i18n-dictionary.ts In-memory dictionary No (static map)
i18n-vue-i18n.ts vue-i18n Yes (via lib)
File Library Replace / plural
i18n-dictionary.ts In-memory dictionary No (static map)
i18n-i18next.ts i18next Yes (via lib)

API

Export / option Type Description
I18nAdapter.t (message, params?) => string Translates a source message; may use params for replace/plural.
I18nAdapter.setLocale (locale: string) => void Optional. Syncs the adapter when Bridge locale changes.
useResolveMessage () => (message, params?) => string Hook that resolves through the active adapter.
resolveMessage (message, adapter?, params?) => string Resolves through an adapter, or returns the source string.
global.i18n I18nAdapter Provider option that enables translated chrome strings.
Note

global.locale is a separate app setting (formatting, direction context). Pair it with global.i18n when you localize chrome copy — Bridge calls adapter.setLocale when the locale changes.

Next steps