useTranslations()

Descripción general

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

const d = useTranslations(); // Get the translation function
d('greeting.hello'); // pass the id to get a translation

useTranslations() utiliza un diccionario para almacenar todo el contenido para traducción. Esto es diferente de usar el componente <T> para traducción. Si solo estás interesado en usar componentes <T> para 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.

Retorna

Una función de traducción d() que, dado un id, retornará 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 ser traducida
`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 useTranslations(). 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 { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

export default async function TranslateGreeting() {
  const d = useTranslations(); 
  return (
    <GTProvider dictionary={dictionary}>
      <p>
        {d('greeting')} // [!code highlight]
      </p>
    </GTProvider>
  );
}

Usando 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 { useTranslations } from 'gt-react';

export default async function TranslateGreeting() {
  const d = useTranslations();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice} // Hello, Alice // [!code highlight]
    </p>
  );
}

Usando 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 useTranslations, todas las claves tienen el prefijo prefix1.prefix2:

UserDetails.jsx

import { useTranslations } from 'gt-react';

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

Notas

La función useTranslations() te permite acceder a las traducciones del diccionario.
El hook useTranslations() solo puede ser usado 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.

useTranslations()

En esta página