[React Intl] Install and Configure the Entry Point of react-intl

We’ll install react-intl, then add it to the mounting point of our React app.

Then, we’ll use react-intl helpers to load locales in our app, including English, Spanish and French and choose which locale data to load based on the user‘s browser language.

We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.

Install:

npm install --save react-intl

index.js:

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;

import { addLocaleData, IntlProvider } from ‘react-intl‘;
import en from ‘react-intl/locale-data/en‘;
import fr from ‘react-intl/locale-data/fr‘;
import es from ‘react-intl/locale-data/es‘;

import messages from ‘./messages‘;

import App from ‘./App‘;
import ‘./index.css‘;

addLocaleData([...en, ...fr, ...es]);

let locale = (navigator.languages && navigator.languages[0])
             || navigator.language
             || navigator.userLanguage
             || ‘en-US‘;

ReactDOM.render(
  <IntlProvider locale={locale} messages={messages[locale]}>
    <App />
  </IntlProvider>,
  document.getElementById(‘root‘)
);

For messages.js, it contains all the translations:

export default {
  ‘en-US‘: {
    detail: {
      toggle: ‘Toggle‘,
      purchase: ‘Purchase this book from:‘,
      reviewsHeading: ‘Reviews‘
    }
  },
  ‘es-ES‘: {
    detail: {
      toggle: ‘Palanca‘,
      purchase: ‘Compre este libro de:‘,
      reviewsHeading: ‘Comentarios‘
    }
  },
  ‘fr-FR‘: {
    detail: {
      toggle:‘Basculer‘,
      purchase: ‘Achetez ce livre à partir de:‘,
      reviewsHeading: ‘Avis‘
    }
  }
}

It is recommended to use flatten structures. So we can use fatten utils:

export function flattenMessages(nestedMessages, prefix = ‘‘) {
  return Object.keys(nestedMessages).reduce((messages, key) => {
    let value = nestedMessages[key];
    let prefixedKey = prefix ? `${prefix}.${key}` : key;

    if (typeof value === ‘string‘) {
      messages[prefixedKey] = value;
    } else {
      Object.assign(messages, flattenMessages(value, prefixedKey));
    }

    return messages;
  }, {});
}

Modify provider to use flattenMessages method:

ReactDOM.render(
  <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
    <App />
  </IntlProvider>,
  document.getElementById(‘root‘)
);

The way to use it:

import { FormattedMessage } from ‘react-intl‘;

<FormattedMessage id="detail.toggle"/>