InlineTranslationOptions

Overview

The InlineTranslationOptions type is used to pass variables to inline translations and specify their render behavior. You can also add context and an identifier to the translation. It is used with useGT() to pass variables to inline string translations.

Buildtime Translation: useGT() translations occur at buildtime; however, variables are never translated. Instead, they are inserted into the translation with formatting. Make sure to follow the deployment guide here.

Reference

Parameters

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`

Description

Prop	Description
`variables`	An object where the keys identify where each value is mapped to in the string.
`$context`	Optionally include `$context` as a variable in the `variables` object to provide context for the content (used for translation).
`$id`	Optionally include `$id` as a variable in the `variables` object to provide an identifier for use with the translation editor.

Examples

Context

In order to add context to the string, we use the $context prop.

Component.tsx

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, world!', { $context: 'a formal greeting' })}</div>;
};

Passing variables

In order to add a variable to the string, we use the {variable-name} syntax, where curleybraces wrap the name of the variable.

Component.tsx

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};

Using ICU message format

gt-react supports ICU message format, which allows you to also format your variables.

Component.tsx

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

See the ICU message format documentation for more information on ICU message format.

Notes

InlineTranslationOptions is used for string translations.
The variables object passes values to the text.
The variablesOptions object defines the behavior of the variables.

Next steps

See useGT() for more information on inline string translations.
See ICU message format for more information on formatting options.

InlineTranslationOptions

On this page