Localization
plocks 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 = {
en: { translation: en },
fr: { translation: fr },
es: { translation: es }
};Wrap your app in the I18nProvider component.
import { I18nProvider } from '@plocks/ui';
import { resources } from './resources';
export function App() {
return (
<I18nProvider initial={{ resources, locale: 'en', fallbackLocale: 'en' }}>
<Root />
</I18nProvider>
);
}EN
FR
ES
Hello, World!
Switch locales by calling setLocale('fr') etc. Components re-render automatically.
import { Alert, Text, ToggleButton, ToggleGroup, useI18n } from '@plocks/ui';
const LOCALES = ['en', 'fr', 'es'];
function Greeting() {
const { t, setLocale, locale } = useI18n();
return (
<>
<ToggleGroup
value={locale}
exclusive
required
onChange={(next) => { if (typeof next === 'string') setLocale(next); }}
>
{LOCALES.map((l) => (
<ToggleButton key={l} value={l}>{l.toUpperCase()}</ToggleButton>
))}
</ToggleGroup>
<Alert icon='globe'>
<Text tx='localization.helloWorld' />
</Alert>
<Text tx='localization.exampleGreeting' txParams={{ name: 'Ada' }} />
<Text>{t('localization.current', { locale })}</Text>
</>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources