OpcionesDeTraducciónEnTiempoDeEjecución

Resumen

El tipo RuntimeTranslationOptions se utiliza para pasar variables a traducciones en línea y especificar su comportamiento de renderizado. También puedes agregar una configuración regional para especificar un idioma diferente para la traducción. Esto se utiliza con la función tx().

Referencia

Parámetros

Descripción

Ejemplos

Pasando 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(`Hello, {username}!`,{ variables: { 'username' : 'Brian123' } })}
  </div>;
};

Agregando opciones de variables

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

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

const Component = () => {
  return <div>
    { tx(
      'Your account balance: {account-balance}!',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

Traduciendo variables

Para traducir una variable, inclúyela directamente en la cadena pasada a tx().

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

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { variables: { 'username' : 'Brian123' } }
  )}</div>;
};

Nota que la variable hairColor se traduce, pero username no.

Especificando una configuración regional

Puedes especificar una configuración regional para usar en la traducción.

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

const Component = () => {
  return <div>{tx('Hello, world!', { locale: 'fr' })}</div>;
};

Esto siempre se traducirá al francés.

Notas

• RuntimeTranslationOptions se utiliza para traducciones de 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

• Consulte tx() 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.