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 para pasar variables a las entradas del diccionario.

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

Referencias

Parámetros

Prop

Type

Descripción

PropDescripción
variablesUn objeto en el que las claves indican a dónde se asigna cada value 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, 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 de ICU message format

gt-react es compatible con 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',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Notas

  • El objeto variables pasa valores 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 las prácticas habituales.
  • 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 opciones de formato.

¿Qué te ha parecido esta guía?

DictionaryTranslationOptions