The "src/localization.js"
component bootstrapped in "src/index.js"
and manages antd
and react-intl
packages.
Additional info: https://github.com/yahoo/react-intl and https://ant.design/components/config-provider/​
Setting up the framework to a completed, translated web app in easy 3 steps:
Add translate file to locales folder "src/locales/fr-FR.js"
with some locale settings
src/locales/fr-FR.jsimport localeAntd from 'antd/es/locale/fr_FR'​const messages = {'topBar.issuesHistory': 'Histoire des problèmes',...}​export default {locale: 'fr-FR',localeAntd,messages,}​
Import added previously configuration in "src/localization.js"
src/localization.jsimport french from 'locales/fr-FR'​const locales = {'fr-FR': french,...}
import { FormattedMessage } from 'react-intl'​<Button type="danger"><FormattedMessage id="topBar.issuesHistory" /></Button>
or use as string:
import { injectIntl } from 'react-intl'...@injectIntlclass LiveSearch extends React.Component {...render() {return (<Inputplaceholder={formatMessage({ id: 'topBar.typeToSearch' })}/>)}}
Just dispatch settings/CHANGE_SETTING
action for changing locale
setting:
dispatch({type: 'settings/CHANGE_SETTING',payload: {setting: 'locale',value: 'fr-FR',},})