Visión general

El tipo RuntimeTranslationOptions se usa para pasar variables a traducciones en línea y especificar su comportamiento de renderizado. También puedes agregar un locale para indicar un idioma distinto para la traducción. Se utiliza junto con la función tx.

Referencias

Parámetros

Descripción

Ejemplos

Pasar variables

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

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`¡Hola, {username}!`,{ 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 { tx } from 'gt-next/server';

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

Traducción de variables

Para traducir una variable, inclúyela directamente en la cadena que se pasa a tx.

import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `¡Hola, {username}! Tu color de pelo es ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

Ten en cuenta que la variable hairColor se traduce, pero username no.

Especificar un locale

Puedes especificar un locale para usar en la traducción.

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('¡Hola, mundo!', { $locale: 'fr' })}</div>;
};

Esto siempre se traducirá al francés.

Notas

• RuntimeTranslationOptions se utiliza para traducir cadenas en tiempo de ejecución.
• El objeto variables pasa valores al texto.
• El objeto variablesOptions define el comportamiento de las variables.

Próximos pasos

• Consulta tx 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.