Internationalisation - I18n With React-Intl

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)

References