I18n

react-intl is a library to manage internationalization and pluralization support for your react application. This involves multi-language support for both the static text but also things like variable numbers, words or names that change with application state. react-intl provides an incredible amount of mature facility to perform these very tasks.

The complete react-intl docs can be found here:

Usage

Below we see the messages.js file for the Footer component example. The messages.js file should be included in any simple or container component that wants to use internationalization. You can add this support when you scaffold your component using this boilerplates scaffolding plop system.

All default English text for the component is contained here (e.g. This project is licensed under the MIT license.), and is tagged with an ID (e.g. boilerplate.components.Footer.license.message) in addition to its object definition id (e.g. licenseMessage).

This is set in react-intl's defineMessages function which is then exported for use in the component. You can read more about defineMessages here:

You can set a local or a global scope variable, to define a prepend object structure.

/*
 * Footer Messages
 *
 * This contains all the text for the Footer component.
 */
import { defineMessages } from 'react-intl';

export const scope = 'boilerplate.components.Footer';

export default defineMessages({
  licenseMessage: {
    id: `${scope}.license.message`, // equals 'boilerplate.components.Footer.license.message'
    defaultMessage: 'This project is licensed under the MIT license.',
  },
  authorMessage: {
    id: `${scope}.author.message`,
    defaultMessage: `
      Made with love by {author}.
    `,
  },
});

Below is the example Footer component. Here we see the component including the messages.js file, which contains all the default component text, organized with ids (and optionally descriptions). We are also importing the FormattedMessage component, which will display a given message from the messages.js file in the selected language.

You will also notice a more complex use of FormattedMessage for the author message where alternate or variable values (i.e. author: <A href="https://twitter.com/mxstbr">Max Stoiber</A>,) are being injected, in this case it's react component.

import React from 'react';

import messages from './modules/messages';
import A from 'components/A';
import styles from './styles.css';
import { FormattedMessage } from 'react-intl';

function Footer() {
  return (
    <footer className={styles.footer}>
      <section>
        <p>
          <FormattedMessage {...messages.licenseMessage} />
        </p>
      </section>
      <section>
        <p>
          <FormattedMessage
            {...messages.authorMessage}
            values={{
              author: <A href="https://twitter.com/mxstbr">Max Stoiber</A>,
            }}
          />
        </p>
      </section>
    </footer>
 );
}

export default Footer;

Adding A Language

You can add a language by running the generation command:

yarn generate language

Then enter the two character i18n standard language specifier (e.g. "fr", "de", "es" - without quotes). This will add in the necessary JSON language file and import statements for the language. Note, it is up to you to fill in the translations for the language.