Descripción general

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

Referencia

Parámetros

Descripción

Ejemplos

Pasar variables

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

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

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

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

Traducción de variables

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

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

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `¡Hola, {username}! Tu color de cabello 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 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 envía 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 en línea.
• Consulta ICU message format para obtener más información sobre las opciones de formato.