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 su comportamiento de representación. Se utiliza con useTranslations para pasar variables a las entradas del diccionario.

Buildtime Translation: Las traducciones con useTranslations se realizan en tiempo de compilación; sin embargo, las variables nunca se traducen. En su lugar, se insertan en la traducción con el formato correspondiente. Asegúrate de seguir la guía de implementación aquí.

Referencias

Parámetros

Prop

Type

Descripción

PropDescripción
variablesUn objeto en el que las 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) añadir una Variable a la Entry y (2) hacer referencia a dicha Variable en la invocación de d.

Primero, añadimos una Variable a la Entry del diccionario con la siguiente sintaxis: {username}. username es el name de la Variable.

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

export default dictionary;

A continuación, hacemos referencia a la Variable:

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

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

Uso del ICU message format

gt-react 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-react';

const Component = () => {
  const d = useTranslations();
  return <div>
    { d(
      'account.balance',
      {
        "dólares" : 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

  • Consulta dictionaries para obtener más información sobre los diccionarios y prácticas comunes.
  • Consulta useTranslations para obtener más información sobre la interfaz de diccionarios.
  • Consulta ICU message format para obtener más información sobre las options de formato.

¿Qué te parece esta guía?