InlineTranslationOptions

Descripción general

El tipo InlineTranslationOptions se utiliza para pasar variables a las traducciones en línea y especificar su comportamiento de renderizado. También puedes agregar contexto y un identificador a la traducción. Se utiliza con useGT() para pasar variables a las traducciones de cadenas en línea.

Traducción en tiempo de construcción: Las traducciones de useGT() ocurren en tiempo de construcción; sin embargo, las variables nunca se traducen. En su lugar, se insertan en la traducción con formato. Asegúrate de seguir la guía de despliegue aquí.

Referencia

Parámetros

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`

Descripción

Prop	Descripción
`variables`	Un objeto donde las claves identifican dónde se mapea cada valor en la cadena.
`$context`	Opcionalmente incluye `$context` como una variable en el objeto `variables` para proporcionar contexto para el contenido (usado para traducción).
`$id`	Opcionalmente incluye `$id` como una variable en el objeto `variables` para proporcionar un identificador para usar con el editor de traducción.

Ejemplos

Contexto

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

Component.tsx

import { useGT } from 'gt-react';

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

Pasando variables

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

Component.tsx

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};

Usando el formato de mensaje ICU

gt-react soporta el formato de mensaje ICU, que te permite también formatear tus variables.

Component.tsx

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Consulta la documentación del formato de mensaje ICU para más información sobre el formato de mensaje ICU.

Notas

InlineTranslationOptions se utiliza para traducciones de cadenas de texto.
El objeto variables pasa valores al texto.
El objeto variablesOptions define el comportamiento de las variables.

Próximos pasos

Consulta useGT() 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 opciones de formato.

InlineTranslationOptions

En esta página