React UI Library ships a lightweight i18n layer. Provide locale resource objects, wrap your app with I18nProvider, then translate via the tx prop or the useI18n hook.
Create JSON resource files per locale.
import
en
from
'./locales/en/common.json'
;
import
fr
from
'./locales/fr/common.json'
;
import
es
from
'./locales/es/common.json'
;
export
const
resources
=
{
Wrap your app in the I18nProvider component.
import
{
I18nProvider
}
from
'@platform-blocks/react-ui-library'
;
import
{
resources
}
from
'./resources'
;
<I18nProvider
initial
=
{
{
resources
,
locale
:
'en'
,
fallbackLocale
:
'en'
}
}
>
Switch locales by calling setLocale('fr') etc. Components re-render automatically.
import
{
Alert
,
Text
,
ToggleButton
,
ToggleGroup
,
useI18n
}
from
'@platform-blocks/react-ui-library'
;
const
LOCALES
=
[
'en'
,
'fr'
,
'es'
]
;
const
{
t
,
setLocale
,
locale
}
=
useI18n
(
)
;
onChange
=
{
(
next
)
=>
{
if
(
typeof next
===
'string'
)
setLocale
(
next
)
;
}
}
<ToggleButton
key
=
{
l
}
value
=
{
l
}
>
{
l
.
toUpperCase
(
)
}
</ToggleButton
>
<Text
tx
=
'localization.helloWorld'
/>
<Text
tx
=
'localization.exampleGreeting'
txParams
=
{
{
name
:
'Ada'
}
}
/>
<Text
>
{
t
(
'localization.current'
,
{
locale
}
)
}
</Text
>