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

Reference

Parameters

Description

Examples

Context

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

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.

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.

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 inline 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.