Translating (React)
There are several ways how to translate a text using our React integration.
useTranslate
hook
Other option how to translate is using of useTranslate
hook. You can use it this way:
import { useTranslate } from '@tolgee/react';
function Component() {
const { t } = useTranslate();
return <div title={t('key_to_translate')}>...</div>;
}
t
function has the same API astolgee.t
.
Using namespaces
useTranslate
hook can be also used for loading additional namespaces.
const { t, isLoading } = useTranslate('common');
This example will add common
to active namespaces. You can then also use isLoading
property, which will tell you if your data are ready.
The T
component
Another way is to use T
component
import { T } from "@tolgee/react";
...
<T keyName="translation_key" />
Message format
By default, Tolgee is without any message formatter. You can use FormatSimple
, allowing basic interpolation, or FormatIcu
for complex formatting.