How to setup react-intl for translating your app

I am currently using react-intl to handle internationalization / translation
on a website I am working on.

Here is a quick how-to:

• Basic setup for react-intl
• Use react-intl as a React component
• Use react-intl as a method call from a React component

# Basic setup for react-intl

Install it: npm install --save react-intl

Setup your React project:

/* React imports */

import React = require('react');
import ReactDOM = require('react-dom');

/* react-intl imports */
import { addLocaleData, IntlProvider } from 'react-intl';

/* Import basic support for another locale if needed
   ('en' is included by default) */
let frLocaleData = require('react-intl/locale-data/fr');
addLocaleData(frLocaleData);

/* Define your translations */
let i18nConfig = {
  locale: 'fr',
  messages: {
    "app.welcome": "Bienvenue !",
    "app.greeting_message": "Salut {name}, ça va ?"
  }
};

/*
  Enable react-intl in your project, initializing it with your locale
  and translations.

  Wrapping your root React component(s) with <IntlProvider/> will give them
  access to <FormattedMessage/ > (it applies recursively to their children
  as well).
*/
ReactDOM.render(
  <IntlProvider locale={i18nConfig.locale} messages={i18nConfig.messages}>
    <YourReactComponent />
  </IntlProvider>,
  (document.getElementById('mainContainer') as HTMLElement)
);

# Use react-intl as a React component

/* React imports */

import React = require('react');

/* react-intl imports */
import { FormattedMessage } from 'react-intl';

/* Use react-intl as a React component */
class YourReactComponent extends React.Component {
  render() {
    return (
      <div>
        <FormattedMessage
          id="app.welcome" />
        {/*
          Renders:
            <span>Bienvenue !</span>
        */}

        <FormattedMessage
          id="app.greeting_message"
          values={{ name: 'Benoit' }} />
        {/*
          Renders:
            <span>Salut Benoit, ça va ?</span>
        */}

        <FormattedMessage
          id="app.greeting_message"
          values={{ name: <b>Benoit</b> }} />
        {/*
          Renders:
            <span>Salut <b>Benoit</b>, ça va ?</span>
        */}

        <FormattedMessage
          id="app.greeting_message"
          values={{ name: 'Benoit' }}>
            {(message) => <input type="text" placeholder={message} />}
        </FormattedMessage>
        {/*
          Renders:
            <input type="text" placeholder="Salut Benoit, ça va ?" />
        */}
      </div>
    );
  }
}

export default YourReactComponent;

# Use react-intl as a method call from a React component

It's sometimes useful to manipulate the translated messages as static texts
(like to use them as leaflet tooltips for example).

Here is how to do:

/* React imports */

import React = require('react');

/* Use react-intl as a method call from a React component */
class YourReactComponent extends React.Component {
  componentWillMount() {
    /* Method call to formatMessage(), see below the "contextTypes" part as
    it's required to make this work. */
    this._myGreetingMessage = this.context.intl.formatMessage(
      { id: "app.greeting_message" }, { name: 'Benoit' }
    );
  }

  render() {
    return (
      <div>
        <div>{this._myGreetingMessage}</div>
      </div>
    );
  }
}

/* Set a contextTypes for 'intl' to have access to
   this.context.intl.formatMessage() from inside your component
*/
YourReactComponent.contextTypes = {
  intl: React.PropTypes.object.isRequired
};

export default YourReactComponent;

Please use the comments box below if you have questions :)