Overview

The RuntimeTranslationOptions type is used to pass variables to inline translations and specify their render behaviour. 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

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

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

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

Using the ICU message format

gt-next supports the ICU message format, which also lets you 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

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 hair colour is ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

Note that the variable hairColor is translated, but username is 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 into French.

Notes

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

Next steps

• See tx for more information on inline string translations.
• See the ICU message format for more details on formatting options.