DictionaryTranslationOptions

Overview

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

Reference

Parameters

Description

Examples

Passing variables

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

First, we 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 ICU message format, which allows you to also 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 behavior of the variables.

Next steps

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