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

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

Step 2: Register configuration

Import added previously configuration in "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" />

or use as string:

import { injectIntl } from 'react-intl'
class LiveSearch extends React.Component {
render() {
return (
placeholder={formatMessage({ id: 'topBar.typeToSearch' })}

How to dynamically change the language?

Just dispatch settings/CHANGE_SETTING action for changing locale setting:

type: 'settings/CHANGE_SETTING',
payload: {
setting: 'locale',
value: 'fr-FR',