Skip to content

Latest commit

 

History

History
108 lines (79 loc) · 3.89 KB

i18n.md

File metadata and controls

108 lines (79 loc) · 3.89 KB
Raw

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:

https://github.com/yahoo/react-intl/wiki

Usage

Below we see a messages.js file for the Footer component example. A 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 it's 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:

https://github.com/yahoo/react-intl/wiki/API#definemessages

/*
 * 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 a react component.

import React from 'react';

import messages from './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;

Extracting i18n JSON files

You can extract all i18n language within each component by running the following command:

  npm run extract-intl

This will extract all language into i18n JSON files in app/translations.

Adding A Language

You can add a language by running the generate command:

  npm run 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.

Removing i18n and react-intl

You can remove react-intl modules by first removing the LanguageProvider object from the app/app.js file and by either removing or not selecting the i18n text option during component scaffolding.

The packages associated with react-intl are:

  • react-intl
  • babel-plugin-react-intl