Descripción general

La función useGT es un hook para traducir cadenas durante la compilación.

const t = useGT();

<p>{  t('Este texto será traducido')  }</p>;

Referencias

Parámetros

Ninguno

Devuelve

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

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

Comportamiento

Producción

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

Una vez generadas, las traducciones se (1) almacenan en la CDN (Content Delivery/Distribution Network) o (2) se almacenan en la salida de compilación de tu app, según tu configuración. Desde allí, el contenido traducido se entrega a tus usuarios. Si no se encuentra una traducción, se mostrará el contenido de respaldo predeterminado.

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 distintos idiomas. Recuerda agregar una Dev API key (clave de API de desarrollo) a tu entorno para habilitar este comportamiento.

Es posible que veas una demora durante las traducciones bajo demanda en desarrollo. Esto no ocurrirá en las compilaciones de producción.

Ejemplo

Uso básico

Puedes usar useGT para traducir textos.

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 de ICU message format

gt-react es compatible con ICU message format, lo que también te permite dar formato a 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 con useGT se resuelven antes de la ejecución, durante el proceso de compilación (excepto en desarrollo).

Próximos pasos

• Consulta useTranslations para traducir textos usando un diccionario.