Translating (React)

Check our React example application

There are two ways how to translate a text using our React integration.

useTranslate hook

The basic way to translate is useTranslate hook.

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

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

  return <div>{t('key_to_translate')}</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

The T component

An alternative way is to use T component, which has a very similar API to the t function mentioned above. The T component can be used in places where you don't have access to React hooks. Also it's it's necessary to use T component for Tags interpolation.

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

...

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

Using namespaces

The useTranslate hook can be also used for loading additional namespaces.

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

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

Read more about namespaces here.