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