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
`context?`	`string`	`undefined`
`id?`	`string`	`undefined`
`variables?`	`Record<string, any>`	`undefined`
`variablesOptions?`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`undefined`

Description

Prop	Description
`context`	The context of the content (used for translation).
`id`	An optional identifier for use with the translation editor.
`variables`	An object where the keys identify where each value is mapped to in the string.
`variablesOptions`	An object where the keys identify the variable and the values define the variables behavior. See `Intl.NumberFormatOptions` and `Intl.DateTimeFormatOptions` for more information.

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?', { variables: { 'username' : 'Brian123' } })}</div>;
};

Adding variable options

You can also customize how your variables render with the variablesOptions prop.

Component.tsx

import { useGT } from 'gt-react';
 
const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Your account balance: {account-balance}!',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

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 Intl.NumberFormatOptions and Intl.DateTimeFormatOptions for more information on formatting options.

InlineTranslationOptions

On this page