useLocale

useLocale() returns { locale, t } for the current mount. locale is the locale actually loaded for this app surface. t(key, values) reads the app's declared locale messages and interpolates named values; missing app keys fall back to the shell translator.

import { useLocale } from '@sota/platform';

export function Greeting({ name }: { name: string }) {
  const { locale, t } = useLocale();
  return <p lang={locale}>{t('greeting', { name })}</p>;
}

locales:
  default: en
  files:
    en: src/locales/en.json
    vi: src/locales/vi.json

src/locales/en.json

{ "greeting": "Hello, {{name}}" }

src/locales/vi.json

{ "greeting": "Xin chào, {{name}}" }

The selected locale falls back according to the app locale contract; a missing app key is then offered to the shell translator. A key missing from both translators is not business data, so provide a sensible component fallback where the label is essential. Keep business data out of translations and provide accessible fallback text for icons and images.