useDict()

Descripción general

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(); // Get the translation function
d('greeting.hello'); // pass the id to get a translation

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

Referencia

Parámetros

Descripción

Retorna

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 precedidas por 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 las traducciones del diccionario en el lado del cliente.
• El hook useDict() solo puede usarse dentro de un componente envuelto por un componente <GTProvider>.

Próximos pasos

• Para traducciones del lado del servidor, consulta getDict().
• Obtén más información sobre el uso de diccionarios en la referencia de diccionarios.
• Consulta DictionaryTranslationOptions para más información sobre las opciones de traducción.