RuntimeTranslationOptions

Overview

The RuntimeTranslationOptions type is used to pass variables to inline translations and specify their render behavior. You can also add a locale to specify a different language for the translation. This is used with the tx() function.

Reference

Parameters

Description

Examples

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.

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Hello, {username}!`,{ variables: { 'username' : 'Brian123' } })}
  </div>;
};

Adding variable options

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

import { tx } from 'gt-next/server';

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

Translating variables

In order to translate a variable, include it directly in the string passed to tx().

import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { variables: { 'username' : 'Brian123' } }
  )}</div>;
};

Note that the variable hairColor gets translated, but username does not.

Specifying a locale

You can specify a locale to use for the translation.

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { locale: 'fr' })}</div>;
};

This will always be translated to french.

Notes

• RuntimeTranslationOptions is used for string translations at runtime.
• The variables object passes values to the text.
• The variablesOptions object defines the behavior of the variables.

Next steps

• See tx() for more information on inline string translations.
• See Intl.NumberFormatOptions and Intl.DateTimeFormatOptions for more information on formatting options.