Descripción general

El tipo InlineTranslationOptions se utiliza para pasar variables a traducciones en línea y especificar su comportamiento de renderizado. También puedes añadir contexto y un identificador a la traducción. Se utiliza con useGT, getGT y msg para pasar variables a traducciones de cadenas en línea.

Referencias

Parámetros

Descripción

Ejemplos

Contexto

Para agregar contexto a la cadena, usamos la prop $context.

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hola, mundo.', { $context: 'un saludo formal' })}</div>;
};

Paso de variables

Para agregar una variable a la cadena, usamos la sintaxis {variable-name}, donde el nombre de la variable va entre llaves.

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('¡Hola, {username}! ¿Cómo va tu día?', { username: 'Brian123' })}</div>;
};

Uso de ICU message format

gt-next es compatible con ICU message format, lo que también te permite dar formato a tus variables.

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Saldo de tu cuenta: {dollars, number, ::currency/USD}.',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Consulta la documentación de ICU message format para obtener más información sobre ICU message format.

Notas

• InlineTranslationOptions se usa para traducciones de cadenas en línea.
• El objeto variables pasa valores al texto.
• El objeto variablesOptions define el comportamiento de las variables.

Próximos pasos

• Consulta useGT y getGT para obtener más información sobre las traducciones de cadenas en línea.
• Consulta ICU message format para obtener más información sobre las options de formato.