Types

InlineTranslationOptions

API Reference for the InlineTranslationOptions type

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

PropTypeDefault
variables??
Record<string, any>
undefined

Description

PropDescription
variablesAn object where the keys identify where each value is mapped to in the string.
$contextOptionally include $context as a variable in the variables object to provide context for the content (used for translation).
$idOptionally 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

How is this guide?