Overview

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

Reference

Parameters

Description

Examples

Context

To add context to a string, use the $context prop.

import { useGT } from 'gt-react';

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

Passing variables

To add a variable to the string, use the {variable-name} syntax, where curly braces wrap the variable name.

import { useGT } from 'gt-react';

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

Using the ICU message format

gt-react supports the ICU message format, which also lets you format your variables.

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 the ICU message format.

Notes

• InlineTranslationOptions is used for inline string translations.
• The variables object passes values into the text.
• The variablesOptions object defines how the variables behave.

Next steps

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