# 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`).

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) }
  )
  ```