---
# System prepended metadata

title: I18n
tags: [brew-js-react]

---

---
tags: brew-js-react
---

# I18n

The `makeTranslation` function is provided in conjunction to the i18n extension in brew.js.

The app must setup i18n in order to work:

```typescript
import brew from "brew-js-react";
import i18n from "brew-js/extensions/i18n";

brew.with(i18n)(app => {
    app.useI18n({
         languages: ['en', 'de'] 
    });
});
```

## Creating translation from JSON

```typescript
const resources = {
    // first level are languages
    en: {
        // second level are prefixes
        prefix: { key: 'Translation string' }
    },
    de: {
        prefix: { key: 'Übersetzungszeichenfolge' }
    }
};

const { translate, useTranslation } = makeTranslation(resources, 'en');
```

## Getting translated string

The `useTranslation` hook implicitly watches the `app.language` property, so that the component is refreshed once `app.language` has changed.


```typescript
function Component() {
    const { t } = useTranslation('prefix');
    return (
        <div>{t('key')}</div>
    );
}
```

## Non-component context

For global context, use `translate` to get translated string.

```typescript
app.language = 'en';
translate('prefix.key'); // -> "Translation string"

app.language = 'de';
translate('prefix.key'); // -> "Übersetzungszeichenfolge"
```
