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

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

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.

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

## Non-component context

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

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

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