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

Using ICU message format

gt-next supports ICU message format, which allows you to also format your variables.

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

const Component = () => {
  return <div>
    { tx(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </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}`,
    { 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 ICU message format for more information on formatting options.