DictionaryTranslationOptions

Overview

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

Buildtime Translation: Variables are not translated with useDict() and getDict(), only the original string. See tx() for translating strings with dyanmic content.

Reference

Parameters

Prop	Type	Default
`variables?`	`Record<string, any>`	`undefined`
`variablesOptions?`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`undefined`

Description

Prop	Description
`variables`	An object where the keys identify where each value is mapped to in the dictionary entry.
`variablesOptions`	An object where the keys identify the variable and the values define the variables behavior. See `Intl.NumberFormatOptions` and `Intl.DateTimeFormatOptions` for more information.

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.

dictionary.ts

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

Next, we reference the variable:

Component.tsx

import { useDict } from 'gt-next/client';
 
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.

dictionary.ts

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

Next, we reference the variable:

Component.tsx

import { useDict } from 'gt-next/client';
 
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() or getDict() for more information on dictionaries interface.
See Intl.NumberFormatOptions and Intl.DateTimeFormatOptions for more information on formatting options.

DictionaryTranslationOptions

On this page