L10N.md

Localization

In this project we're using React-Intl to localize our application.

Localize a component or page

To localize a component or page you have to include intl in your class contextTypes, for example:

var React = require('react');

var Example = React.createClass({
  contextTypes: {
    intl: React.PropTypes.object
  },
  render: function() {
    return (
      <div>
        <h1>{this.context.intl.formatMessage({id: 'key_name_here'})}
      </div>
    );
  }

});

If the strings include HTML, use the FormattedHTMLMessage element:

import { FormattedHTMLMessage } from 'react-intl';

<FormattedHTMLMessage
  id="key_name_here"
/>

Once you add the intl context it will expose context.intl.formatMessage method to your component to get the localized message for the given id as a key.

Adding locale

Because we are using .properties for our translation and React-Intl expects JSON, we need an extra build step to convert .properties to JSON. We are using pontoon-to-json to convert from .properties to JSON.

config for localization

intl-config.js

{
  "supportedLocales": ["en-US", "de", "fr", "pt-BR", "es"],
  "dest": "locales",
  "src": "locales"
}

Note: You can set supportedLocales to '*' in your .env to enable all locales under src directory. See the main README for more details.

.properties template

locales/en-US/messages.properties

first=This is your first message
second=This is your second message

You have to make sure you match your language code in the directory structure with what you include in your config file for the converting part otherwise it will fail.

Translation

We use Pontoon to do all of our translation, so if you would like to help us translate please visit this link.

Translation data deploy process

Pontoon automatically commit the translation that was approved from the app by the language team lead. Everytime we deploy our app to the staging server the translation data that's in the locales directory will be deployed.

Translation data to production

Since the translation is being taken care by Pontoon and it is automatically deployed to staging, we have full control for what language to be enabled on production, please see the main README for more information on this.