Localization

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:

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

Import added previously configuration in "src/localization.js"

src/localization.js
import french from 'locales/fr-FR'
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'
...
@injectIntl
class LiveSearch extends React.Component {
...
render() {
return (
<Input
placeholder={formatMessage({ id: 'topBar.typeToSearch' })}
/>
)
}
}

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',
},
})