TranslationProvider

When to use

All localized Whisker modules. Pair with LanguageSelect for locale switching.

When NOT to use

English-only internal tools — still recommended for consistency. Host not RTL-ready — set disableLanguageAlignment.

Related stores

• useTranslation

Common pitfalls

• Set team to your translation namespace on Nike CDN.
• disableLanguageAlignment keeps layout LTR while loading RTL locale strings.
• team also scopes the cache key (team:locale), so two teams sharing a locale never overwrite each other’s fetched translations.

Supported languages

24 languages are supported for both translation and font loading:

Language	Locale code	Nike font	RTL
Arabic (Saudi Arabia)	ar-SA	Myriad Arabic	Yes
Chinese (Simplified)	zh-Hans-CN	Noto Sans SC	No
Chinese (Traditional)	zh-Hant-TW	Noto Sans TC	No
Croatian	hr	Helvetica Now	No
Czech	cs-CZ	Helvetica Now	No
Dutch	nl-NL	Helvetica Now	No
English (US)	en-US	Helvetica Now	No
English (GB)	en-GB	Helvetica Now	No
French	fr-FR	Helvetica Now	No
German	de-DE	Helvetica Now	No
Greek	el-GR	Helvetica Neue LT	No
Hebrew	he	Helvetica Now	Yes
Hungarian	hu-HU	Helvetica Now	No
Italian	it-IT	Helvetica Now	No
Japanese	ja-JP	Noto Sans JP	No
Korean	ko-KR	Noto Sans KR	No
Portuguese (Brazilian)	pt-BR	Helvetica Now	No
Portuguese (European)	pt-PT	Helvetica Now	No
Russian	ru-RU	Helvetica Neue LT	No
Spanish (Latin America)	es-419	Helvetica Now	No
Spanish (Mexico)	es-MX	Helvetica Now	No
Spanish (Spain)	es-ES	Helvetica Now	No
Thai	th-TH	Helvetica Neue LT Thai	No
Turkish	tr-TR	Helvetica Now	No

useTranslation() hook

Property	Type	Description
locale	Locale	Current locale
setLocale	(locale: Locale) => void	Change locale (auto-loads fonts)
getMessage	(key: string) => string	Get translation by key (returns <<key>> if not found)
formatMessage	(key: string, params: Record<string, string | number>) => string	Get translation with {param} replacement
isRTL	boolean	True if current locale is right-to-left
isLoading	boolean	True while translations are being fetched
error	string | null	Error message if translation fetch failed

Changing locale automatically: fetches translations for the new locale from Nike CDN, loads the appropriate Nike fonts, and updates RTL/LTR direction — no manual font loading needed.

Best practices

• Place TranslationProvider at the root of your app — it handles both translations and fonts.
• No need to call loadNikeFonts() separately — the provider does it automatically on locale change.
• Use dot notation for keys for better organization ('user.profile.title').
• Use formatMessage for dynamic content with {param} syntax.
• Test RTL layouts if supporting Arabic and Hebrew.
• Missing translations return <<key>>, making them easy to spot.
• Translations are cached — once fetched, they won’t be fetched again for that locale.

Props

Auto-generated from src/providers/TranslationProvider/TranslationProvider.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

TranslationProviderProps

Prop	Type	Required	Description
children	ReactNode	Yes	Provider content to localize.
disableLanguageAlignment	boolean	No	Disable automatic RTL/LTR alignment driven by the active locale. When true: - document.documentElement.dir is forced to 'ltr' regardless of locale. - The context’s isRTL value is always reported as false. Use this in host applications whose layout/components are not RTL-ready, so translations still load for RTL locales (Arabic, Hebrew, etc.) without the rest of the UI flipping. Defaults to false.
fallbackLocale	TranslationLocale	No	Fallback locale used when the active locale key is missing a translation key. Defaults to en-US.
locale	TranslationLocale	No	Initial locale to use on mount and whenever this provider prop changes. Bodega codes like en-US, ja-JP, es-MX.
team	TranslationTeam	No	Translation namespace for Nike CDN path. Cache keys include both team and locale so multiple teams can coexist in memory without overwriting each other. URL shape: https://www.nike.com/assets/i18n/{team}/{locale}.json Defaults to sim-web.

Examples

Localized module

import { TranslationProvider } from '@nike/whisker-component-library';

<TranslationProvider locale="en-US" fallbackLocale="en-US" team="sim-web">
  <App />
</TranslationProvider>;

Using translations

import { useTranslation } from '@nike/whisker-component-library';

function MyComponent() {
  const { getMessage, locale, setLocale, isLoading, error } = useTranslation();

  if (isLoading) return <div>Loading translations...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>{getMessage('common.loading')}</h1>
      <p>Current locale: {locale}</p>
      <button onClick={() => setLocale('ja-jp')}>Switch to Japanese</button>
    </div>
  );
}

Language switcher

function LanguageSwitcher() {
  const { locale, setLocale } = useTranslation();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en-US">English</option>
      <option value="ja-JP">日本語</option>
      <option value="ko-KR">한국어</option>
      <option value="es-ES">Español</option>
      <option value="fr-FR">Français</option>
    </select>
  );
}

With parameters

function Greeting() {
  const { formatMessage } = useTranslation();

  // Translation: "Hello {name}, you have {count} messages"
  return (
    <div>
      {formatMessage('greeting.message', { name: 'John', count: 5 })}
      {/* Output: "Hello John, you have 5 messages" */}
    </div>
  );
}

RTL support

function MyComponent() {
  const { isRTL, getMessage } = useTranslation();

  return (
    <div style={{ textAlign: isRTL ? 'right' : 'left' }}>
      <h1>{getMessage('common.welcome')}</h1>
      {/* Content automatically flips for Arabic */}
    </div>
  );
}

Team-based namespaces

team controls both CDN source and cache scope. Teams with the same locale can coexist without overwriting one another:

<TranslationProvider locale="en-US" team="sim-web"> ... </TranslationProvider>
<TranslationProvider locale="en-US" team="sim-host"> ... </TranslationProvider>