Descripción general

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

const m = useMessages();

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

Referencia

Parámetros

Ninguno

Valor de retorno

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

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

Comportamiento

Producción

Durante el proceso de CD, cualquier contenido dentro de una función msg se traducirá antes de desplegar 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 la CDN (Red de distribución de contenido) o (2) se almacenan en la salida de compilación de tu app, según tu configuración. A partir de ahí, el contenido traducido se sirve a tus usuarios. Si no se encuentra una traducción, se usará el contenido de respaldo predeterminado o el contenido original.

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

Desarrollo

Durante el desarrollo, la función m traducirá el contenido bajo demanda. Esto es útil para prototipar cómo se verá tu aplicación 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 a menos que el contenido se esté traduciendo explícitamente bajo demanda, es decir, usando tx o <Tx>.

Ejemplo

Uso básico

Puedes usar useMessages para translate 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 pasar variables a las cadenas de texto codificadas.

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

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

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })} {/* Esto mostrará "¡Hola, Bob!" */}
    </p>
  );
}

Las variables msg tienen prioridad sobre las variables m

Cuando pasas variables tanto a msg como a m, las variables que pases a msg tendrán prioridad sobre las variables que pases a m.

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á "Hello, Alice!"; la variable no se sobrescribe en tiempo de renderizado.

Uso del ICU message format

gt-react admite el ICU message format, lo que también te permite formatear 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 traducciones con useMessages se resuelven antes de la ejecución, durante el proceso de compilación (salvo en desarrollo).

Próximos pasos

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