Translation and I18N

To allow your application to be translated an Internationalization is integrated in the App framework.

Defining the phrases

Language files need to be located in the src/locales folder with at least a en-US or en locale.

Each phrase is associated to a unique id which is used to retrieve it in the application:

hello_name: "Hello, {{name}}!"

You can organise phrases into structures.

welcome:
  back: "Welcome back"
  again: "Hello again"

When you do this, you refer to the phrase by the full ID, using dots to denote hierarchy, for example

<Phrase id="welcome.again" />

Using the phrases

To use a phrase in your code, use the i18n helper available from dpapp like this:

<p>{dpapp.i18n.t("hello_name", { name: "John" )}</p>

You can also use the shorter alias t :

<p>{dpapp.t("hello_name", { name: "John" )}</p>

Or finally you can use the Phrase component:

import { Phrase } from '@deskpro/apps-components/DeskproApp';
<Phrase id="hello_name" name="John" />

Plural

If your phrases need to handle counts you can add a plural version of a phrase:

item: "item"
item_plural: "items"

Then the phrase will be automatically selected based on the count attribute value:

<Phrase id="item" count={1} /> // -> "item"
<Phrase id="item" count={3} /> // -> "items"

You can also include the {{count}} value in your phrase:

item: "item"
item_plural: "items"

Languages with multiple plurals

This sample uses Arabic that has 5 plural forms beside the singular:

  key_0: "zero",
  key_1: "singular",
  key_2: "two",
  key_3: "few",
  key_4: "many",
  key_5: "other"

Which gets:

<Phrase id="key" count={0} /> // -> "zero"
<Phrase id="key" count={1} /> // -> "singular"
<Phrase id="key" count={2} /> // -> "two"
<Phrase id="key" count={3} /> // -> "few"
<Phrase id="key" count={11} /> // -> "many"
<Phrase id="key" count={100} /> // -> "other"