Overview

The DictionaryTranslationOptions type is used to pass variables to dictionary entries and specify their render behaviour. It is used with useTranslations and getTranslations to pass variables to dictionary entries.

Reference

Parameters

Description

Examples

Passing variables

To pass a variable to the dictionary entry, we need to do two things: (1) add a variable to the entry and (2) reference that variable in the d invocation.

First, add a variable to the dictionary entry with the following syntax: {username}. username is the name of the variable.

const dictionary = {
  greeting: {
    hello: 'Hello, {username}!',
  },
};

export default dictionary;

Next, we reference the variable:

import { useTranslations } from 'gt-next';

const Component = () => {
  const d = useTranslations();
  return <div>{d('greeting.hello', { username: 'Brian123' })}</div>;
};

Using ICU message format

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

const dictionary = {
  account: {
    balance: 'Your account balance: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;

Next, we reference the variable:

import { useTranslations } from 'gt-next';

const Component = () => {
  const d = useTranslations();
  return <div>
    { d(
      'account.balance',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Notes

• The variables object passes values to a dictionary entry.
• The variablesOptions object defines the behaviour of the variables.

Next steps

• See dictionaries for more information on dictionaries and common practices.
• See useTranslations or getTranslations for more information on the dictionaries interface.
• See ICU message format for more information on formatting options.