DictionaryTranslationOptions

Overview

The DictionaryTranslationOptions type is used to pass variables to dictionary entries and specify their render behavior. It is used with useDict() 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 { useDict } from 'gt-react';
 
const Component = () => {
  const d = useDict();
  return <div>{d('greeting.hello', { variables: { username : 'Brian123' } })}</div>;
};

Adding variable options

Variable options allow you to customize how a variable is rendered. It uses the same syntax as the variables object.

const dictionary = {
  account: {
    balance: 'Your account balance: {account-balance}!',
  },
};
 
export default dictionary;

Next, we reference the variable:

import { useDict } from 'gt-react';
 
const Component = () => {
  const d = useDict();
  return <div>
    { d(
      'account.balance',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </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 useDict() for more information on dictionaries interface.
• See Intl.NumberFormatOptions and Intl.DateTimeFormatOptions for more information on formatting options.