Translating with React

There are several ways how to translate a text using our React integration.

The T component

First way is the <T> component. You can use it like this:

import {T} from "@tolgee/react";
...
<T keyName="translation_key" />

To pass values just assign parameters property.

<T keyName="text_with_params" parameters={{ param: 'value' }} />

For translated text This is {param} of the text it will result in This is value of the text.

This will prevent any possible problems with Tolgee wrapping technology, but you won't be able to use in-contexts translation feature for this particular occurrence.

Providing default value

When keyName property is provided, then children prop of T component is considered as default value.

<T keyName="translation_key">This is default value.</T>

The default value will be rendered when no translation is provided in current nor fallback language.

useTranslate hook

Other option how to translate is using of useTranslate hook. You can use it this way:

import {useTranslate} from "@tolgee/react";
...
const t = useTranslate();
...
t("key_to_translate")

Function t also accepts parameters object as second parameter:

t('key_to_translate', { param: 'value' });

For more complex codebase showing usage of Tolgee React integration check React example application.

Message format

All Tolgee integrations follow ICU message format standard.

{dogsCount, plural, one {One dog is} other {# dogs are}} here.

To read more about it, check ICU Message Format documentation page.

All Tolgee JS integrations are using MessageFormat class of formatJs library.