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',
  },
})
Code Splitting
Authorization (FIrebase)
Last updated 1 month ago