Translating

You can implement translation in your React application in two ways.

• Using the useTranslate hook
• Using the T-component

useTranslate hook

The Tolgee React SDK provides the useTranslate hook, which comes with a translation function (t function). Using this t function, you can render the actual translation.

import { useTranslate } from '@tolgee/react';

function Component() {
  const { t } = useTranslate();

  return <div>{t('key_to_translate', 'DEFAULT VALUE')}</div>;
}

t function

This function allows you to render the actual translation.

Simple usage

t('app_title')

The t function looks into your translations finds an appropriate key and renders the translation for currently selected language

If you use Typescript read about typed keys

Default value

You can pass the default value as second parameter, which will be rendered if the key doesn't exist yet.

t('non_existant_key', 'Default value')

Parameter interpolation

You can supply a variable parameters which will then be rendered in your translations.

t('user_points', 'User has {count} points', { count: 10 })

// -> User has 10 points

There are more options you can do with the variable parameters, but it depends on selected formatter plugin.

To get the full t function specification check it's API

T component

An alternative way is to use the T component. It has a very similar API to the t function mentioned above.

import { T } from "@tolgee/react";

...

<T
  keyName="translation_key"
  defaultValue="User has {count} points"
  params={{ count: 10 }}
/>

useTranslate hook vs T-component

The T component has a similar API to that of the t function mentioned above. However, there are some considerations when deciding which to use:

• To apply translation in the component where you don't have access to React hooks, use the T component.
• If you want to use Tags interpolation, use the T component.
• For namespaces, use the useTranslate hook. Check the following example to learn more:

const { t, isLoading } = useTranslate('common');

This example will load common namespace which can be then used with t function.

Read more about namespaces here.

tip

You can also check the React example application to learn more.