How to add I18n

Here's a summary of adding the I18n functionality.

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

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

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

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.

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

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

Add translations.js and default.js to your .gitignore and .eslintignore.
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. 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.

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

Notes

See Support for Rails' i18n pluralization #1000 for a discussion of issues around pluralization.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!