Descripción general

La función useGT es un hook para traducir strings en tiempo de build.

const t = useGT();

<p>{  t('Este texto se traducirá')  }</p>;

Referencias

Parámetros

Ninguno

Devuelve

Una función de callback, t, que traduce el contenido proporcionado.

(content: string, options?: InlineTranslationOptions) => string

Comportamiento

Producción

Durante el proceso de CD, cualquier contenido dentro de una función t se traducirá antes de que se despliegue tu aplicación. Esto garantiza tiempos de carga rápidos para todos los locales, pero solo puede traducir contenido conocido en tiempo de compilación.

Una vez generadas, las traducciones se almacenan (1) en la CDN (Red de Distribución de Contenido) o (2) en la salida de compilación de tu aplicación, según tu configuración. A partir de ahí, el contenido traducido se entrega a tus usuarios. Si no se encuentra una traducción, se usará el contenido de respaldo predeterminado del contenido original.

Asegúrate de seguir la guía de despliegue aquí.

Desarrollo

Durante el desarrollo, la función t traducirá el contenido bajo demanda. Esto es útil para prototipar cómo se verá tu app en diferentes idiomas. Recuerda agregar una Dev API key a tu entorno para habilitar este comportamiento.

Verás una demora durante la traducción bajo demanda en desarrollo. Esto no ocurrirá en las compilaciones de producción.

Ejemplo

Uso básico

Puedes usar useGT para traducir cadenas.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('¡Hola, Alice!')}
    </p>
  );
}

Nota: "Alice" se traducirá al idioma preferido del usuario.

Uso de variables

Puedes pasar variables a las traducciones del diccionario.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('¡Hola, {name}!', { name: 'Alice' })}
    </p>
  );
}

Nota: "Alice" no se traducirá al idioma preferido del usuario porque es una Variable.

Uso del ICU message format

gt-react es compatible con el ICU message format, lo que también te permite formatear tus variables.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('Hay {count, plural, =0 {ningún artículo} =1 {un artículo} other {{count} artículos}} en el carrito', { count: 10 })}
    </p>
  );
}

Notas

• La función useGT es un hook para traducir cadenas.
• El hook useGT solo puede usarse dentro de un componente envuelto por un componente <GTProvider>.
• Las traducciones de cadenas con useGT se realizan antes de la ejecución, durante el proceso de compilación (salvo en desarrollo).

Próximos pasos

• Consulta useTranslations para traducir textos usando un diccionario.