> For the complete documentation index, see [llms.txt](https://deskpro.gitbook.io/deskpro-apps/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deskpro.gitbook.io/deskpro-apps/app-client-dpapp/translation-and-i18n.md).

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

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

You can organise phrases into structures.&#x20;

```yaml
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&#x20;

```jsx
<Phrase id="welcome.again" />
```

## Using the phrases

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

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

�You can also use the shorter alias `t` :

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

Or finally you can use the Phrase component:

```jsx
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:

```yaml
item: "item"
item_plural: "items"
```

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

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

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

```yaml
item: "item"
item_plural: "items"
```

### Languages with multiple plurals

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

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

Which gets:&#x20;

```jsx
<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"

```
