Descripción general

La función useMessages es un hook para traducir cadenas codificadas de msg en tiempo de compilación.

const m = useMessages();

<p>{  m(encodedString)  }</p>;

Referencia

Parámetros

Ninguno

Devuelve

Una función de devolución de llamada, m, que traduce el contenido codificado proporcionado en msg.

(encodedContent: string, options?: Record<string, any>) => string

Comportamiento

Producción

Durante el proceso de Entrega/Despliegue Continuo (CD), cualquier contenido dentro de una función msg se traducirá antes de que se implemente 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 (1) almacenan en el CDN (Red de Distribución de Contenidos) o (2) se incluyen 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 usará el contenido de respaldo predeterminado (el contenido original).

Asegúrate de seguir la guía de implementación aquí.

Desarrollo

Durante el desarrollo, la función m traducirá contenido bajo demanda. Esto es útil para prototipar cómo se verá tu aplicación en distintos idiomas. Recuerda agregar una Dev API key (clave de API de desarrollo) a tu entorno para habilitar este comportamiento.

Verás una demora durante las traducciones bajo demanda en desarrollo. Esto no ocurrirá en las compilaciones de producción a menos que el contenido se traduzca explícitamente bajo demanda, es decir, usando tx o <Tx>.

Ejemplo

Uso básico

Puedes usar useMessages para traducir cadenas codificadas de msg.

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('¡Hola, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

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

Uso de variables

Puedes reemplazar variables en cadenas codificadas.

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('¡Hola, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Nota: Esto mostrará "¡Hola, Bob!"; la variable se reemplaza en tiempo de renderizado.

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 { msg, useMessages } from 'gt-react';

const encodedMessage = msg('Hay {count, plural, =0 {ningún artículo} =1 {un artículo} other {{count} artículos}} en el carrito', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

Notas

• La función useMessages es un hook que traduce cadenas codificadas de msg.
• Las cadenas de traducción con useMessages se procesan antes de la ejecución, durante la fase de compilación (salvo en desarrollo).

Próximos pasos

• Consulta getMessages para obtener traducciones asíncronas de cadenas a partir de cadenas codificadas durante el build.
• Consulta msg para codificar cadenas para su traducción.
• Para traducciones en tiempo de ejecución, consulta tx y <Tx>.