Types

DictionaryTranslationOptions

Referencia de API para el tipo DictionaryTranslationOptions

Descripción general

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

Traducción en tiempo de construcción: Las traducciones de useTranslations() ocurren en tiempo de construcción; sin embargo, las variables nunca se traducen. En su lugar, se insertan en la traducción con formato. Asegúrate de seguir la guía de despliegue aquí.

Referencia

Parámetros

PropTypeDefault
variables??
Record<string, any>
undefined

Descripción

PropDescripción
variablesUn objeto donde las claves identifican dónde se mapea cada valor en la entrada del diccionario.

Ejemplos

Pasando 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 { useTranslations } from 'gt-react';

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

Usando formato de mensaje ICU

gt-react soporta el formato de mensaje ICU, que te permite también formatear tus variables.

dictionary.ts
const dictionary = {
  account: {
    balance: 'Your account balance: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;

A continuación, referenciamos la variable:

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

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

Notas

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

Próximos pasos

  • Consulta diccionarios para obtener más información sobre diccionarios y prácticas comunes.
  • Consulta useTranslations() para obtener más información sobre la interfaz de diccionarios.
  • Consulta formato de mensaje ICU para obtener más información sobre las opciones de formato.

¿Qué te parece esta guía?