OpcionesDeTraducciónEnLínea

Resumen

El tipo InlineTranslationOptions se utiliza para pasar variables a 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 traducciones de cadenas en línea.

Traducción en tiempo de compilación: Las traducciones de useGT() ocurren en tiempo de compilació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
`context??`	`string`	`undefined`
`id??`	`string`	`undefined`
`variables??`	`Record<string, any>`	`undefined`
`variablesOptions??`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`undefined`

Descripción

Prop	Descripción
`context`	El contexto del contenido (utilizado para la traducción).
`id`	Un identificador opcional para usar con el editor de traducción.
`variables`	Un objeto donde las claves identifican dónde se asigna cada valor en la cadena.
`variablesOptions`	Un objeto donde las claves identifican la variable y los valores definen el comportamiento de las variables. Consulte `Intl.NumberFormatOptions` y `Intl.DateTimeFormatOptions` para más informació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('¡Hola, mundo!', { context: 'un saludo formal' })}</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('¡Hola, {username}! ¿Cómo va tu día?', { variables: { 'username' : 'Brian123' } })}</div>;
};

Agregando opciones de variables

También puedes personalizar cómo se renderizan tus variables con la prop variablesOptions.

Component.tsx

import { useGT } from 'gt-react';
 
const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Saldo de tu cuenta: {account-balance}!',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

Notas

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

Próximos pasos

Consulte useGT() para obtener más información sobre traducciones de cadenas en línea.
Consulte Intl.NumberFormatOptions y Intl.DateTimeFormatOptions para obtener más información sobre las opciones de formato.

OpcionesDeTraducciónEnLínea

En esta página