Descripción general

El tipo InlineTranslationOptions se usa 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.

Referencia

Parámetros

Descripción

Ejemplos

Contexto

Para añadir contexto a la cadena, usamos la prop $context.

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, world!', { $context: 'saludo formal' })}</div>;
};

Pasar variables

Para añadir una variable a la cadena, usamos la sintaxis {variable-name}, donde las llaves rodean el nombre de la variable.

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 del ICU message format

gt-next es compatible con el ICU message format, lo que también te permite formatear 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 del ICU message format para obtener más información sobre el ICU message format.

Notas

• InlineTranslationOptions se utiliza para traducciones de cadenas en línea.
• El objeto variables pasa value 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 traducciones de cadenas en línea.
• Consulta ICU message format para obtener más información sobre las options de formato.