Digioli.co.uk

I{['nternationalisatio'].length}n or I18n or 'Internationalisation'. Look no 'zee'; we're British.

First, install 'react-intl'.

import { IntlProvider, FormattedMessage, addLocaleData } from 'react-intl'
import App from '../App'

import en from 'react-intl/locale-data/en'
import zh from 'react-intl/locale-data/zh'
import messagesEn from '../../locales/en.json'
import messagesZh from '../../locales/zh.json'
const messages = {
  en: messagesEn,
  zh: messagesZh
}
addLocaleData([...en, ...zh])
const languageRegion = (navigator.languages && navigator.languages[0]) ||
  navigator.language ||
  navigator.userLanguage
const language = languageRegion.toLowerCase().split(/[_-]+/)[0]
<IntlProvider
  locale={messages}
  messages={messages[language]}
>
  <App />
</IntlProvider>

Create a languages/locales folder. Add a language json file like so:

{
  "Welcome": "Eeee Hiya {name}!"
}

You create translation files with same ids such as 'Welcome'.

Then, in another component:

<FormattedMessage id='Welcome' values={{ name: 'Bob Johnson' }} /> //<span>Eeee Hiya Bob Johnson!</span>

Cushty. Next is how to translate form input placeholders. The current method is like so:

import { FormattedMessage, injectIntl } from 'react-intl'

// App ...
  render () {
    const { formatMessage } = this.props.intl
return &lt;input placeholder={formatMessage({ id: 'App.Placeholder' }) /&gt;
  }
// App ...
export default injectIntl(App)

Internationalisation - I18n With React-Intl

References