Descripción general

La función msg marca y codifica cadenas para su traducción.

const encodedString = msg('¡Hola, mundo!');

La cadena codificada debe pasarse al hook useMessages o a la función getTranslations para obtener las traducciones.

Decodificación

Para recuperar la cadena original, debes decodificarla con decodeMsg

import { msg, decodeMsg } from 'gt-react';
const encodedString = msg('¡Hola, mundo!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // "¡Hola, mundo!"

Referencia

Parámetros

Devuelve

Una cadena codificada, en la que las variables interpoladas (si las hay) se sustituyen por sus valores.

Comportamiento

Producción

Durante el proceso de CD (entrega/despliegue continuos), 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 contenido) o (2) almacenan 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 con el contenido original.

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

Desarrollo

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

Notará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 esté traduciendo explícitamente bajo demanda, es decir, usando tx o <Tx>.

Ejemplo

Uso básico

Puedes usar msg para marcar cadenas para su traducción.

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

const encodedString = msg('Hola, mundo');

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

Nota: "Hello, world!" se traducirá al idioma preferido del usuario.

Uso de variables

Puedes pasar variables a las traducciones del diccionario.

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

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

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

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

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

Uso de ICU message format

gt-react admite ICU message format, lo que también te permite formatear tus variables.

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

const encodedString = 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(encodedString)}
    </p>
  );
}

Notas

• La función msg marca cadenas para su traducción.
• Las traducciones con msg se resuelven antes de la ejecución, durante el proceso de compilación (salvo en desarrollo).

Próximos pasos

• Consulta useMessages para traducir textos.