Types

DictionaryTranslationOptions

Referencia de API del tipo DictionaryTranslationOptions

Descripción general

El tipo DictionaryTranslationOptions se usa para pasar variables a las entradas del diccionario y especificar cómo se renderizan. Se utiliza con useTranslations y getTranslations para pasar variables a las entradas del diccionario.

Buildtime Translation: Las variables no se traducen con useTranslations ni con getTranslations; solo se traduce la cadena original. Consulta tx para traducir cadenas con contenido dinámico.

Referencia

Parámetros

Prop

Type

Descripción

PropDescripción
variablesUn objeto cuyas claves indican a qué value se asigna cada una en la entrada del diccionario.

Ejemplos

Pasar variables

Para pasar una variable a la entrada del diccionario, debemos 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: '¡Hola, {username}!',
  },
};

export default dictionary;

A continuación, referenciamos la Variable:

Component.tsx
import { useTranslations } from 'gt-next';

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

Uso del ICU message format

gt-next es compatible con el ICU message format, lo que también te permite formatear tus variables.

dictionary.ts
const dictionary = {
  account: {
    balance: 'Saldo de tu cuenta: {dollars, number, ::currency/USD}.',
  },
};

export default dictionary;

A continuación, hacemos referencia a la variable:

Component.tsx
import { useTranslations } from 'gt-next';

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

Notas

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

Próximos pasos

¿Qué te parece esta guía?