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() and getGT() to pass variables to inline string translations.

Buildtime Translation: Variables are not translated with useGT() and getGT(), only the original string. See tx() for translating strings with dyanmic content.

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-next';

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 curly braces wrap the name of the variable.

Component.tsx

import { useGT } from 'gt-next';

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

Using ICU message format

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

Component.tsx

import { useGT } from 'gt-next';

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() and getGT() for more information on inline string translations.
See ICU message format for more information on formatting options.

InlineTranslationOptions

On this page