Skip to content

Latest commit

 

History

History
95 lines (72 loc) · 3.42 KB

i18n.md

File metadata and controls

95 lines (72 loc) · 3.42 KB
Raw

i18n

react-intl is a library to manage internationalization and pluralization support for react applications. This involves multi-language support for both the static text but also things like variable numbers, words or names that change with application state.

Check react-intl's very comprehensive docs ➝ for more info.

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 default defineMessages({
  licenseMessage: {
    id: 'boilerplate.components.Footer.license.message',
    defaultMessage: 'This project is licensed under the MIT license.',
  },
  authorMessage: {
    id: 'boilerplate.components.Footer.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.