GitHub

Descripción general

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

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

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

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

Referencias

Parámetros

Prop

Type

Descripción

Prop	Descripción
`id`	Un prefijo opcional para anteponer 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, devuelve la versión traducida de la Entry correspondiente

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

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

Ejemplos

Uso básico del diccionario

Cada Entry de 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) hacer referencia a 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 únicamente 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 se prefijan con 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 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 cadenas traducidas desde el diccionario de traducción.

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

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

Referencias

Parámetros

Prop

Type

Descripción

Prop	Descripción
`id`	Un prefijo opcional para anteponer 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, devuelve la versión traducida de la Entry correspondiente

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

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

Ejemplos

Uso básico del diccionario

Cada Entry de 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) hacer referencia a 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 únicamente 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 se prefijan con 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 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 cadenas traducidas desde el diccionario de traducción.

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

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

Referencias

Parámetros

Prop

Type

Descripción

Prop	Descripción
`id`	Un prefijo opcional para anteponer 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, devuelve la versión traducida de la Entry correspondiente

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

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

Ejemplos

Uso básico del diccionario

Cada Entry de 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) hacer referencia a 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 únicamente 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 se prefijan con 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 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

GitHubDale una estrella en GitHub

GitHubDale una estrella en GitHub

Dale una estrella en GitHub

Dale una estrella en GitHub