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, with {{name}} replaced from params, and pipe plural forms when count is set.

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. Pluralization uses the count argument on t(message, count, params): i18next / vue-i18n handle it in t; dictionary adapters call selectPluralMessage on pipe forms (one | other). Without an adapter, resolveMessage still replaces {{name}} and picks pipe forms when count is set. Adapters that used t(message, params) should move interpolation vars to the third argument. Bridge setLocale updates global.locale and calls optional adapter.setLocale.

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

Import

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

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

Examples

Ready adapters ship in the separate @bridge-ui/adapters package under i18n-* subpaths. Pass the result to global.i18n on BridgeUIProvider. On Vue you can also use createBridgeUI(); in Astro, wire it once via appEntrypoint. Install @bridge-ui/adapters and the peer from the table. createDictionaryI18nAdapter() takes no options, ships en-US and pt-BR chrome strings, and needs no extra package. Missing keys fall back to the original English source.

import { createDictionaryI18nAdapter } from "@bridge-ui/adapters/vue/i18n-dictionary";

const i18n = createDictionaryI18nAdapter();

import { createDictionaryI18nAdapter } from "@bridge-ui/adapters/react/i18n-dictionary";

const i18n = createDictionaryI18nAdapter();

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

let locale = "en-US";

const i18n: I18nAdapter = {
  setLocale(next) {
    locale = next;
  },
  t(message, count, params) {
    // look up message for `locale`, fall back to source
    // replace {{name}} from params; pick | forms when count is set
    return message;
  },
};

Import	Library	Install	Replace / plural
@bridge-ui/adapters/vue/i18n-dictionary	In-memory dictionary	None	Yes (pipe forms)
@bridge-ui/adapters/vue/i18n-vue-i18n	vue-i18n	vue-i18n	Yes (via lib)

Import	Library	Install	Replace / plural
@bridge-ui/adapters/react/i18n-dictionary	In-memory dictionary	None	Yes (pipe forms)
@bridge-ui/adapters/react/i18n-i18next	i18next	i18next	Yes (via lib)

Chrome strings

Source (key)
Cancel sorting
Clear selection
Close
Columns
Decrement value
Expand row
Filter column
First page
Hide password
Increment value
Last page
Loading
Loading...
Next
No data
No options
OK
Page {{page}} of {{count}}
Pagination
Previous
Reset
Rows per page
Search
Select all items
Select all rows
Select row
Show password
Sort ascending
Sort descending
{{selected}} of {{total}} row(s) selected.

The selection summary calls t with count (selected rows). Dictionary values for that key use pipe-separated one / other forms.

API

Export / option	Type	Description
global.i18n	I18nAdapter	Provider option that enables translated chrome strings.
I18nAdapter.setLocale	(locale: string) => void	Optional. Syncs the adapter when Bridge locale changes.
I18nAdapter.t	(message, count?, params?) => string	Translates a source message. count is the plural cardinal; params are interpolation vars.
interpolateMessage	(template, params?) => string	Replaces {{name}} tokens from params.
resolveMessage	(message, adapter?, countOrParams?, params?) => string	Resolves through an adapter, or interpolates / picks pipe forms without one.
selectPluralMessage	(template, count) => string	Picks a pipe-separated form: one/other, or zero/one/other.
useResolveMessage	() => (message, count?, params?) => string	Hook that resolves through the active adapter.

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

Icons — semantic icon adapter
Dates — date library adapter
Default props — other global provider options
Password Field — uses Show/Hide password chrome strings
DataTable — uses Columns, Search, Filter column, Select row, Select all rows, Select all items, OK, Reset, No data, Rows per page, First page, Last page, Page of count, selection summary, Sort ascending, Sort descending, and Cancel sorting chrome strings
Pagination — uses Previous, Next, and Pagination chrome strings