i18n.md

Using the I18n module

The I18n module provides a helper called i18n.t that you can use to localize your application.

Setup

Put a defaultLocale property into your manifest.json file, otherwise it will use english (en)

Add your translation files as src/translations/XX.json where XX is a locale such as en-US, de, or zh.

A simple translation file might look like this:

{
  "hello": "Hello!",
  "goodbye": "Bye {{name}}!",
  "formal": {
    "farewell": "Farewell, friend."
  }
}

The "app" section in translation files is used only for public app listings in the Zendesk Marketplace. For these listings, we only allow English. The "app" sections in other translation files will be ignored.

Initialization

When you know which locale you want to use, call i18n.loadTranslations(locale) where locale is a string like en-US, de, zh. This will load the strings under the matching file in src/translations. For example, you could use

import i18n from 'i18n';

const zafClient = ZAFClient.init();
zafClient.get('currentUser.locale').then((data) => {
  const locale = data['currentUser.locale'];
  i18n.loadTranslations(locale);
});

Reference

i18n.loadTranslations(locale)

Sets the locale to be used by i18n.t()

Arguments

• locale: String representing the filename of the required translation JSON file.

i18n.t(key, context)

Returns a translated string using a key that is available in the relevant translation file (found in src/translations/XX.json).

Arguments

• key: The key assigned to the string in the JSON file. Dots may be used to access nested objects.
• context: An object with named values to be interpolated into the resulting string.

Returns

A translated string generated by keying into the JSON file and interpolating any placeholders.

Example

i18n.t('hello'); // returns "Hello!"
i18n.t('goodbye', { name: 'Yak' }); // returns "Bye Yak!"
i18n.t('formal.farewell'); // returns "Farewell, friend."