Wraps your app to set the active locale and (optionally) merge additional translation catalogs + per-locale overrides. Astryx components inside the subtree resolve their strings against this context. If no provider is present, components fall back to the shipped English defaults.
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {useState} from 'react';
import {InternationalizationProvider} from '@astryxdesign/core/i18n';
import frFR from '@astryxdesign/core/locales/fr-FR.json';
import {Stack} from '@astryxdesign/core/Layout';
import {
SegmentedControl,
SegmentedControlItem,
} from '@astryxdesign/core/SegmentedControl';
import {Selector} from '@astryxdesign/core/Selector';
type Locale = 'en' | 'fr-FR';
export default function InternationalizationProviderShippedLocale() {
const [locale, setLocale] = useState<Locale>('en');
const [value, setValue] = useState<string | null>(null);
return (
<InternationalizationProvider locale={locale} messages={{'fr-FR': frFR}}>
<Stack direction="vertical" gap={4} hAlign="center">
<SegmentedControl
label="Language"
value={locale}
onChange={nextLocale => setLocale(nextLocale as Locale)}
size="sm">
<SegmentedControlItem value="en" label="EN" />
<SegmentedControlItem value="fr-FR" label="FR" />
</SegmentedControl>
<Selector
style={{width: 300}}
label="Billing region"
options={[
{value: 'americas', label: 'Americas'},
{value: 'emea', label: 'EMEA'},
{value: 'apac', label: 'APAC'},
]}
value={value}
onChange={setValue}
hasClear
/>
</Stack>
</InternationalizationProvider>
);
}
Usage
Wraps your app to set the active locale and (optionally) merge additional translation catalogs + per-locale overrides. Astryx components inside the subtree resolve their strings against this context. If no provider is present, components fall back to the shipped English defaults.
Use shipped Astryx locale catalogs from @astryxdesign/core/locales/* when one exists for your target locale.
Use a same-shape local catalog only when Astryx has not shipped that locale yet or you are testing in-progress translations.
Use real BCP 47 tags such as fr, pt-BR, or ar; regional locales fall back to their base language before English.
Set the dir attribute on <html> (or a wrapping element) yourself; the provider does not set it. Astryx components mirror layout and directional icons from the DOM dir, so an RTL locale won't visually mirror without it. Use getLocaleDirection(locale) to derive the value for both the provider and the DOM.
Cast custom catalog maps to any; the i18n package exports MessagesByLocale and Catalog for local catalog typing.
Typed props
Prop
Type and behavior
locale
string · required
BCP 47 language tag for the active locale (e.g. "en", "pt", "pt-BR", "zh-Hans"). Regional tags fall back to their base language, then to the shipped "en" catalog.
messages
MessagesByLocale · optional
Optional map of BCP 47 tag to translation catalog. Import shipped catalogs from @astryxdesign/core/locales/*; the shipped "en" catalog is always available and does not need to be listed here.
overrides
Overrides · optional
Sparse per-locale key overrides applied on top of shipped defaults. Overrides are locale-keyed so a runtime locale swap picks up the correct set.
dir
'ltr' | 'rtl' · optional
Explicit text-direction override for the context. When omitted, direction is derived from locale via Intl.Locale.getTextInfo(). This sets the direction Astryx reads, but it does NOT set the DOM dir attribute; you must set dir on <html> (or a wrapping element) yourself, since Astryx components mirror layout and directional icons from the DOM dir, not from this prop. Set both to the same value and keep them in sync.
children
ReactNode · required
Content to render with the internationalization provider.
