Skip to content

Latest commit

 

History

History
99 lines (77 loc) · 4.15 KB

i18n.md

File metadata and controls

99 lines (77 loc) · 4.15 KB

I18n

Here's a summary of adding the I18n functionality.

  1. Add config.i18n_dir in config/initializers/react_on_rails.rb

React on Rails will generate translations.json & default.json automatically (see #3) 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.json: All your locales in json format. default.json: Default settings in json format.

  1. Add translations.json and default.json to your .gitignore.

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

Once you setup config.i18n_dir as in the previous step, you will need to make sure rake react_on_rails:locale runs before webpack.

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.

Generate locales with react-intl support

By default the locales generated in json format. If you need to generate files in the prior way with react-intl supported via js files:

  1. Specify i18n output format in react_on_rails.rb:
  config.i18n_output_format = 'js'
  1. Add react-intl & intl to client/package.json, and remember to bundle && yarn install. Versions should be newer than these:
"dependencies": {
  ...
  "intl": "^1.2.5",
  "react-intl": "^2.1.5",
  ...
}

  1. Add translations.js and default.js to your .gitignore and .eslintignore.

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