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().

Traducción en Tiempo de Ejecución: Para traducir una variable bajo demanda, inclúyelas directamente en la cadena pasada a tx(). Las variables pasadas a tx() a través del objeto options no se traducen.

Referencia

Parámetros

Prop	Type	Default
`locale??`	`string`	`undefined`
`variables??`	`Record<string, any>`	`undefined`
`variablesOptions??`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`undefined`

Descripción

Prop	Descripción
`locale`	Un locale opcional para usar en la traducción. Por defecto, se utilizará el locale más preferido del navegador que sea compatible con tu aplicació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. Consulta `Intl.NumberFormatOptions` y `Intl.DateTimeFormatOptions` para más informació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.

Component.tsx

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.

Component.tsx

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().

Component.tsx

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.

Component.tsx

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.

OpcionesDeTraducciónEnTiempoDeEjecución

En esta página