Types

OpcionesDeTraduccionDeDiccionario

Referencia de API para el tipo OpcionesDeTraduccionDeDiccionario

Descripción general

El tipo DictionaryTranslationOptions se utiliza para pasar variables a las entradas del diccionario y especificar su comportamiento de renderizado. Se utiliza con useDict() y getDict() para pasar variables a las entradas del diccionario.

Traducción en tiempo de compilación: Las variables no se traducen con useDict() y getDict(), solo la cadena original. Consulta tx() para traducir cadenas con contenido dinámico.

Referencia

Parámetros

PropTypeDefault
variablesOptions??
Record<string, Intl.NumberFormatOptions | Intl.DateTimeFormatOptions>
undefined
variables??
Record<string, any>
undefined

Descripción

PropDescripción
variablesUn objeto donde las claves identifican a dónde se asigna cada valor en la entrada del diccionario.
variablesOptionsUn objeto donde las claves identifican la variable y los valores definen el comportamiento de las variables. Consulta Intl.NumberFormatOptions y Intl.DateTimeFormatOptions para más información.

Ejemplos

Pasar variables

Para pasar una variable a la entrada del diccionario, necesitamos hacer dos cosas: (1) agregar una variable a la entrada y (2) referenciar dicha variable en la invocación de d().

Primero, agregamos una variable a la entrada del diccionario con la siguiente sintaxis: {username}. username es el nombre de la variable.

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

export default dictionary;

A continuación, referenciamos la variable:

Component.tsx
import { useDict } from 'gt-next/client';

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

Agregar opciones de variables

Las opciones de variables te permiten personalizar cómo se muestra una variable. Utiliza la misma sintaxis que el objeto variables.

dictionary.ts
const dictionary = {
  account: {
    balance: 'Your account balance: {account-balance}!',
  },
};

export default dictionary;

A continuación, referenciamos la 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>;
};

Notas

  • El objeto variables pasa valores a una entrada del diccionario.
  • El objeto variablesOptions define el comportamiento de las variables.

Próximos pasos

¿Qué te parece esta guía?