Translating with React

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

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

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

To pass values just assign parameters property.

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

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

To skip key wrapping in translation mode use T component with noWrap param such as:

<T parameters={{param: "value"}} noWrap={true}>text_with_params</T>

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

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")

t function also accepts parameters object as second parameter:

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

or noWrap parameter as third parameter:

t("key_to_translate", {}, true);

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.