Skip to main content

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