useDict()

Resumen

useDict() se utiliza para acceder a las traducciones de cadenas desde el diccionario de traducción para componentes del lado del cliente. 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

Para traducciones del lado del servidor, consulte getDict().

Referencia

Parámetros

Descripción

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

Ejemplos

Usos Básicos

Cada entrada en tu diccionario se traduce.

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

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

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

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}.

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

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

Uso de prefijos

Podemos usar prefijos para traducir solo un subconjunto del diccionario.

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:

"use client";
import { useDict } from 'gt-next/client';
 
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 en el lado del cliente.
• El hook useDict() solo se puede usar dentro de un componente envuelto por un componente <GTProvider>.

Próximos Pasos

• Para traducciones del lado del servidor, consulte getDict().
• Aprenda más sobre el uso de diccionarios en la referencia de diccionarios.
• Consulte DictionaryTranslationOptions para obtener más información sobre las opciones de traducción.