useGT()

Descripción general

La función useGT() es un hook para traducir cadenas de texto en tiempo de compilación.

const t = useGT();

<p>{  t('This text will be translated')  }</p>;

Referencia

Parámetros

Ninguno

Retorna

Una función 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() será traducido antes de que tu aplicación sea desplegada. Esto asegura tiempos de carga rápidos para todas las configuraciones regionales, pero solo puede traducir contenido conocido en tiempo de construcción.

Una vez generadas, las traducciones se almacenan (1) en el CDN o (2) en la salida de construcción de tu aplicación, según tu configuración. Desde allí, el contenido traducido se sirve a tus usuarios. Si no se encuentra una traducción, se recurrirá al 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 crear prototipos de cómo se verá tu aplicación en diferentes idiomas. Recuerda agregar una clave de API de desarrollo a tu entorno para habilitar este comportamiento.

Verás un retraso durante la traducción bajo demanda en desarrollo. Esto no ocurrirá durante las construcciones de producción.

Ejemplo

Uso Básico

Puedes usar useGT() para traducir cadenas de texto.

import { useGT } from 'gt-react';

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

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

Nota: "Alice" será traducido al idioma preferido del usuario.

Usando variables

Puedes pasar variables a las traducciones del diccionario.

import { useGT } from 'gt-react';

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

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

Nota: "Alice" no será traducido al idioma preferido del usuario porque es una variable.

Notas

• La función useGT() es un hook para traducir cadenas de texto.
• El hook useGT() solo puede ser usado dentro de un componente envuelto por un componente <GTProvider>.
• Las traducciones de cadenas con useGT() ocurren antes del tiempo de ejecución, durante el proceso de construcción (a menos que esté en desarrollo).

Próximos pasos

• Consulta useTranslations() para traducir cadenas usando un diccionario.
• Consulta InlineTranslationOptions para más información sobre la personalización de traducciones.