# How to add I18n

Here's a summary of adding the I18n functionality.

You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and [PR #340](https://github.com/shakacode/react-webpack-rails-tutorial/pull/340), [commmited](https://github.com/shakacode/react-webpack-rails-tutorial/commit/ef369ed9d922aea5116ca7e50208169fd7831389) for a complete example.

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

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

2. Add `config.i18n_dir` in `config/initializers/react_on_rails.rb`

  `react-intl` requires locale files in json format. React on Rails will generate `translations.js` & `default.js` automatically after you configured your `config.i18n_dir` in `config/initializers/react_on_rails.rb`.

  ```ruby
  # 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")
  ```

  Optionally you can also set `config.i18n_yml_dir` if you do not what to use all the locale files from rails.
  ```ruby
  # Replace the following line to the location where you keep your client i18n yml files
  # By default(without this option), all yaml files from Rails.root.join("config", "locales") and installed gems are loaded
  config.i18n_yml_dir = Rails.root.join("PATH_TO", "YOUR_YAML_I18N_FOLDER")
  ```

  `translations.js`: All your locales in json format.
  `default.js`: Default settings in json format.

3. Add `translations.js` and `default.js` to your `.gitignore` and `.eslintignore`.

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 automatically do this for testing (if using the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets` and for production deployments if using the [default precompile rake hook](../additional-reading/heroku-deployment.md). For development, you should adjust your startup scripts (Procfiles) so that they run **`bundle exec rake react_on_rails:locale`** before running any webpack watch process (`yarn run build:development`). You may need to configure your CI to  run **`bundle exec rake react_on_rails:locale`** before any webpack process if you are not using the React on Rails test helper. Note, if you are try to lint before running tests, and you are depending on the test helper to build your locales, your linting will fail because the translations won't be built yet. The fix is either to 1) run the rake task to build the translations before running the lint command or 2) to run the tests first.

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

  ```js
  ...
  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>
  )
  ```
  ```js
  // In your component.
  import { defaultMessages } from 'path_to/i18n/default';
  ...
  return (
    { formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
  )
  ```