Localization

Localization component src/localization.js bootstrapped in src/index.js and handles antd and react-intl packages.

Additional info: https://github.com/yahoo/react-intl and https://ant.design/components/locale-provider/

How To

Setting up the framework to a completed, translated web app in easy 3 steps:

Step 1: Adding translate config file

Add translate file to locales folder src/locales/fr-FR.js with some locale settings

src/locales/fr-FR.js
import localeAntd from 'antd/es/locale/fr_FR'
const messages = {
'topBar.issuesHistory': 'Histoire des problèmes',
...
}
export default {
locale: 'fr-FR',
localeAntd,
messages,
}

Step 2: Register configuration

Register added previously configuration in src/localization.js

src/localization.js
import french from 'locales/fr-FR'
addLocaleData(french.localeData)
const locales = {
'fr-FR': french,
...
}

Step 3: Add formatter to any component

import { FormattedMessage } from 'react-intl'
<Button type="danger">
<FormattedMessage id="topBar.issuesHistory" />
</Button>

or use as string:

import { injectIntl } from 'react-intl'
const FavPages = ({ intl: { formatMessage } }) => {
return (
<Input
placeholder={formatMessage({ id: 'topBar.issuesHistory' })}
value={searchText}
onChange={changeSearchText}
allowClear
/>
)
}
export default injectIntl(FavPages)

How to dynamically change the language?

Just dispatch settings/CHANGE_SETTING action for changing locale setting:

dispatch({
type: 'settings/CHANGE_SETTING',
payload: {
setting: 'locale',
value: 'fr-FR',
},
})