Descripción general

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

Referencias

Parámetros

Descripción

Ejemplos

Contexto

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

import { useGT } from 'gt-react';

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

Paso de variables

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

import { useGT } from 'gt-react';

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-react es compatible con ICU message format, lo que también te permite formatear tus variables.

import { useGT } from 'gt-react';

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 utiliza para traducciones de cadenas inline.
• El objeto variables transmite valores al texto.
• El objeto variablesOptions define el comportamiento de las variables.

Próximos pasos

• Consulta useGT para obtener más información sobre traducciones de cadenas inline.
• Consulta ICU message format para obtener más información sobre las opciones de formato.