i18n.md

How to add I18n

Here's a summary of adding the I18n functionality.

You can refer to react-webpack-rails-tutorial and PR #340 for a complete example.

1. Add react-intl & intl to client/package.json, and remember to bundle && yarn install.

"dependencies": {
  ...
  "intl": "^1.2.5",
  "react-intl": "^2.1.5",
  ...
}

2. In client/webpack.client.base.config.js, set react-intl as an entry point.

module.exports = {
  ...
  entry: {
    ...
    vendor: [
      ...
      'react-intl',
    ],
    ...

3. react-intl requires locale files in json format. React on Rails will help you to generate or update translations.js & default.js automatically after you configured the following settings.

translations.js: All your locales in json format.

default.js: Default settings in json format.

You can add them to .gitignore and .eslintignore.

Update settings in config/initializers/react_on_rails.rb to what you need:

# Replace the following line to the location where you keep translation.js & default.js.
config.i18n_dir = Rails.root.join("PATH_TO", "YOUR_JS_I18N_FOLDER")

4. Javascript locale files must be generated before yarn build.

Once you setup config.i18n_dir as in the previous step, react_on_rails will help you to do this.

If you create your own Procfile files, you must add bundle exec rake react_on_rails:locale before yarn build.

5. In React, you need to initialize react-intl, and set parameters for it.

...
import { addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';
import de from 'react-intl/locale-data/de';
import { translations } from 'path_to/i18n/translations';
import { defaultLocale } from 'path_to/i18n/default';
...
// Initizalize all locales for react-intl.
addLocaleData([...en, ...de]);
...
// set locale and messages for IntlProvider.
const locale = method_to_get_current_locale() || defaultLocale;
const messages = translations[locale];
...
return (
  <IntlProvider locale={locale} key={locale} messages={messages}>
    <CommentScreen {...{ actions, data }} />
  </IntlProvider>
)

// In your component.
import { defaultMessages } from 'path_to/i18n/default';
...
return (
  { formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
)