i18n.md

Using the I18n module

The useI18n hook can be used to translate strings based on the current user's locale settings.

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 useI18n. An example of this can be found in the /src/app/locations/Modal.jsx component, where the modal.title will be translated.

import { XL } from '@zendeskgarden/react-typography'
import { useI18n } from '../hooks/useI18n'

const Modal = () => {
  const { t } = useI18n()
  return <XL isBold>{t('modal.title')}</XL>
}

export default Modal

Reference

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