useTranslations

Descripción general

useTranslations se usa para acceder a traducciones de cadenas desde el diccionario de traducción.

Debe usarse dentro de un componente envuelto en un <GTProvider>.

const d = useTranslations(); // Obtén la función de traducción
d('greeting.hello'); // Pasa el id para obtener la traducción

useTranslations utiliza un diccionario para almacenar todo el contenido a traducir. Esto es distinto de usar el componente <T> para la traducción. Si solo te interesa usar componentes <T> para traducir, este documento no es relevante.

Referencia

Parámetros

Prop

Type

Descripción

Prop	Descripción
`id`	Prefijo opcional que se antepone a todas las claves de traducción. Es útil para trabajar con valores anidados del diccionario.

Devuelve

Una función de traducción d que, dado un id, retornará la versión traducida de la Entry correspondiente

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

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

Ejemplos

Uso básico del diccionario

Cada Entry en tu diccionario se traduce.

dictionary.jsx

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

Cuando queremos acceder a estas entradas, llamamos a useTranslations. Esta devuelve una función que recibe 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 function TranslateGreeting() {
  const d = useTranslations(); 
  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 ese 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: "¡Hola, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

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

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

Uso de prefijos

Podemos usar prefijos para traducir solo un subconjunto del diccionario.

dictionary.jsx

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

Como agregamos el value 'prefix1.prefix2' al hook useTranslations, todas las claves quedan con 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 usarse dentro de un componente envuelto por un componente <GTProvider>.

Próximos pasos

Descripción general

useTranslations se usa para acceder a traducciones de cadenas desde el diccionario de traducción.

Debe usarse dentro de un componente envuelto en un <GTProvider>.

const d = useTranslations(); // Obtén la función de traducción
d('greeting.hello'); // Pasa el id para obtener la traducción

Referencia

Parámetros

Prop

Type

Descripción

Prop	Descripción
`id`	Prefijo opcional que se antepone a todas las claves de traducción. Es útil para trabajar con valores anidados del diccionario.

Devuelve

Una función de traducción d que, dado un id, retornará la versión traducida de la Entry correspondiente

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

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

Ejemplos

Uso básico del diccionario

Cada Entry en tu diccionario se traduce.

dictionary.jsx

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

Cuando queremos acceder a estas entradas, llamamos a useTranslations. Esta devuelve una función que recibe 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 function TranslateGreeting() {
  const d = useTranslations(); 
  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 ese 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: "¡Hola, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

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

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

Uso de prefijos

Podemos usar prefijos para traducir solo un subconjunto del diccionario.

dictionary.jsx

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

Como agregamos el value 'prefix1.prefix2' al hook useTranslations, todas las claves quedan con 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 usarse dentro de un componente envuelto por un componente <GTProvider>.

Próximos pasos

Descripción general

useTranslations se usa para acceder a traducciones de cadenas desde el diccionario de traducción.

Debe usarse dentro de un componente envuelto en un <GTProvider>.

const d = useTranslations(); // Obtén la función de traducción
d('greeting.hello'); // Pasa el id para obtener la traducción

Referencia

Parámetros

Prop

Type

Descripción

Prop	Descripción
`id`	Prefijo opcional que se antepone a todas las claves de traducción. Es útil para trabajar con valores anidados del diccionario.

Devuelve

Una función de traducción d que, dado un id, retornará la versión traducida de la Entry correspondiente

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

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

Ejemplos

Uso básico del diccionario

Cada Entry en tu diccionario se traduce.

dictionary.jsx

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

Cuando queremos acceder a estas entradas, llamamos a useTranslations. Esta devuelve una función que recibe 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 function TranslateGreeting() {
  const d = useTranslations(); 
  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 ese 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: "¡Hola, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

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

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

Uso de prefijos

Podemos usar prefijos para traducir solo un subconjunto del diccionario.

dictionary.jsx

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

Como agregamos el value 'prefix1.prefix2' al hook useTranslations, todas las claves quedan con 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 usarse dentro de un componente envuelto por un componente <GTProvider>.

useTranslations

En esta página

useTranslations

En esta página

useTranslations

En esta página

GitHubDestacar en GitHub

GitHubDestacar en GitHub

Destacar en GitHub

Destacar en GitHub