useGT()

Overview

The useGT() function is a hook for translating strings at build time.

const t = useGT();
 
<p>{  t('This text will be translated')  }</p>;

Reference

Parameters

None

Returns

A callback function, t(), which translates the provided content.

(content: string, options?: InlineTranslationOptions) => string

Behavior

Production

During the CD process, any content inside of a t() function will be translated before your application is deployed. This ensures fast load times for all locales, but it can only translate content known at build time.

Once generated, translations are either (1) stored in the CDN or (2) stored in your app's build output, according to your configuration. From there, the translated content is served to your users. If a translation is not found, it will fallback to the originial content.

Make sure to follow the deployment guide here.

Development

During development, the t() function will translate content on demand. This is useful for prototyping what your app will look like in different languages. Remember to add a Dev API key to your environment to enable this behavior.

You will see a delay during on demand translation in development. This will not occur during for production builds.

Example

Basic Usage

You can use useGT() to translate strings.

import { useGT } from 'gt-react';
 
export default function TranslateGreeting() {
  const t = useGT();
 
  return (
    <p>
      {t('Hello, Alice!')}
    </p>
  );
}

Note: "Alice" will be translated to the user's preferred language.

Using variables

You can pass variables to dictionary translations.

import { useGT } from 'gt-react';
 
export default function TranslateGreeting() {
  const t = useGT();
 
  return (
    <p>
      {t('Hello, {name}!', { variables: { name: 'Alice' } })}
    </p>
  );
}

Note: "Alice" will not translated to the user's preferred language because it is a variable.

Notes

• The useGT() function is a hook for translating strings.
• The useGT() hook can only be used within a component wrapped by a <GTProvider> component.
• Translations strings with useGT() happen before runtime, during the build process (unless in development).

Next steps

• See useDict() for translating strings using a dictionary.
• See InlineTranslationOptions for more information on customizing translations.