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.