useDict()

Resumen

useDict() se utiliza para acceder a traducciones de cadenas desde el diccionario de traducción. Debe usarse dentro de un componente envuelto por un <GTProvider>.

const d = useDict(); // Obtener la función de traducción
d('greeting.hello'); // pasar el id para obtener una traducción

useDict() utiliza un diccionario para almacenar todo el contenido para la traducción. Esto es diferente de usar el componente <T> para la traducción. Si estás interesado solo en usar componentes <T> para la traducción, entonces este documento no es relevante.

Referencia

Parámetros

Prop	Type	Default
`id??`	`string`	`undefined`

Descripción

Prop	Descripción
`id`	Un prefijo opcional para anteponer a todas las claves de traducción. Esto es útil para trabajar con valores de diccionario anidados.

Retornos

Una función de traducción d() que, dado un id, devolverá la versión traducida de la entrada correspondiente

(id: string, options?: DictionaryTranslationOptions) => React.ReactNode

Nombre	Tipo	Descripción
`id`	`string`	El id de la entrada a traducir
`options?`	`DictionaryTranslationOptions`	Opciones de traducción para personalizar el comportamiento de `d()`.

Ejemplos

Usos Básicos

Cada entrada en tu diccionario se traduce.

dictionary.jsx

const dictionary = {
  greeting: "Hello, Bob", 
};
export default dictionary;

Cuando queremos acceder a estas entradas, llamamos a useDict(). Esto devuelve una función que acepta la clave de una traducción del diccionario.

Debes pasar el diccionario al componente GTProvider.

TranslateGreeting.jsx

import { useDict } from 'gt-react';
import dictionary from "./dictionary.json"
 
export default async function TranslateGreeting() {
  const d = useDict(); 
  return (
    <GTProvider dictionary={dictionary}>
      <p>
        {d('greeting')} // [!code highlight]
      </p>
    </GTProvider>
  );
}

Uso de variables

Para pasar valores, debes (1) asignar un identificador y (2) referenciar el identificador al llamar a la función d().

En este ejemplo, usamos {} para pasar variables a las traducciones. En el diccionario, asignamos el identificador {userName}.

dictionary.jsx

const dictionary = {
  greeting: "Hello, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

import { useDict } from 'gt-react';
 
export default async function TranslateGreeting() {
  const d = useDict();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 
 
  return (
    <p>
      {greetingAlice} // Hello, Alice // [!code highlight]
    </p>
  );
}

Uso de prefijos

Podemos usar prefijos para traducir solo un subconjunto del diccionario.

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;

Debido a que agregamos el valor 'prefix1.prefix2' al hook useDict, todas las claves están prefijadas con prefix1.prefix2:

UserDetails.jsx

import { useDict } from 'gt-react';
 
export default function UserDetails() {
  const d = useDict('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Notas

La función useDict() te permite acceder a traducciones de diccionario.
El hook useDict() solo se puede usar dentro de un componente envuelto por un componente <GTProvider>.

Próximos Pasos

Aprende más sobre el uso de diccionarios en la referencia de diccionarios.

useDict()

En esta página