`useT`

React hook that returns you a translation function and state of the <Provider>.

const [t, state] = useT();

You can specify a namespace or a list of namespaces to be used to create the translation function t.

useT('errors');
useT(['main', 'errors']);

If you don't specify the namespace(s), the default namespace will be used.

Translation Function `t`

t function can be used to translate texts.

<div>{t('Hello')}</div>

Your translation can be functions.

<Provider map={{en: {main: {you_have_likes: (num) => `You have ${num} likes.`}}}} />

<div>{t('you_have_likes', 5)}</div>
// You have 5 likes.

If your translations are functions you can also use tagged template literals.

<Provider map={{en: {main: {hello_user: (name) => `Hi, ${name}!`}}}} />

<div>{t.t('hello_user')`Hello, ${props.name}!`}</div>
// Hi, <name>!

In this case, if translation was not found, it would return Hi, <name>!.

state is the state provided by <Provider>.

Change current locale.

state.setLocale('fr');

Pre-load translations.

await state.load('fr', 'error');

useT will also work when <Provider> is not wrapper around your React tree. It is useful when you want to just design presentational components.

state.setLocale(locale);
state.load(locale, namespace);