None
- Very simple usage. Add reducer and use provided methods.
- Translations are divided between components.
-
i18n.setLocale(locale)
. Argumentlocale
must be a string. This function change locale for all app. -
Component.setLocale(locale)
. Is same. -
this.props.setLocale(locale)
. Is same. -
i18n.setFallbackLocale(locale)
. By default fallback locale isnull
. Warning! This way created for workaround confuses of lost translations. Normal way is correct labels for all used locales. -
i18n.translate(componentName, labelPath, locale = currentLocale)
. If the label isn't found by labelPath, labelPath will be returned. The return labelPath is necessary if the label is not found needed, because this is an easy way to find the lost labels.componentName
tells from what component will use translations.labelPath
tells from what path by component branch will get result label.locale
tells what locale we should use. By default it's current locale (by functionsetLocale
).
-
Component.translate(labelPath, locale = currentLocale)
. -
this.props.translate(labelPath, locale = currentLocale)
.
You can see simple example in examples/simple-react
folder in this repo. But key points are:
- Set initial locale, optionally fallback locale in your index.jsx file, and Provider:
import i18n from '@emdc/i18n';
// initial locale
i18n.setLocale('en');
// optionally fallback locale
i18n.setFallbackLocale('en');
ReactDOM.render(
<AppContainer>
<i18n.Provider>
<AppComponent />
</i18n.Provider>
</AppContainer>,
element
);
- Use in components by two ways:
import * as React from 'react';
import i18n from '@emdc/i18n';
const translations = {
en: {
test: 'Component label'
},
ru: {
test: 'Текст Comp'
}
};
// You shuould provide component name for functional components and use 'translate' func from props
const Comp = i18n.localize(translations, 'Comp')(({translate}) => (
<div>
{translate('test')}
</div>
));
import * as React from 'react';
import i18n from '@emdc/i18n';
const translations = {
en: {
test: 'App label',
switchTo: {
en: 'Switch to English',
ru: 'Переключиться на русский язык',
de: 'Wechseln Sie zu Deutsch'
}
},
ru: {
test: 'Текст App',
switchTo: {
en: 'Switch to English',
ru: 'Переключиться на русский язык',
de: 'Wechseln Sie zu Deutsch'
}
},
de: {
test: 'Inschrift App',
switchTo: {
en: 'Switch to English',
ru: 'Переключиться на русский язык',
de: 'Wechseln Sie zu Deutsch'
}
}
};
// 1. You can use function 'localize' as decorator
// 2. You can omit the component name for regular components
// 3. You can use 'translate' function from component class: App.translate, from props or from i18n module.
// 4. You can change locale by function 'setLocale' from i18n module or from props.
// 5. You can specify locale for translate.
@i18n.localize(translations)
class App extends React.Component {
constructor (props) {
super(props);
}
render () {
return (
<div>
<div>
<button onClick={() => i18n.setLocale('en')}>
{App.translate('switchTo.en')}
</button>
<button onClick={() => this.props.setLocale('ru')}>
{translate('switchTo.ru')}
</button>
<button onClick={() => i18n.setLocale('de')}>
{i18n.translate('App', 'switchTo.de')}
</button>
</div>
<div>
{`Translated label from class: ${App.translate('test')}`}
<br />
{`Translated label from props: ${this.props.translate('test')}`}
<br />
</div>
</div>
);
}
}
export default App;