Formato de mensaje

18ways utiliza waysParser por defecto. Ese analizador es lo que te permite mantener la copia fuente legible mientras sigues manejando variables y un formato sensible a la configuración regional.

Variables

Utiliza llaves para las variables. Con <T>, puedes mantener el valor en línea junto al mensaje.

tsx
'use client';
 
import { T } from '@18ways/react';
 
export function WelcomeMessage() {
  return (
    <T>Hello {{ name: 'Ada' }}</T>
  );
}

Pluralización

Utiliza bloques de plural al estilo ICU cuando la oración cambie de forma de manera genuina.

tsx
import { T } from '@18ways/react';
 
export function InboxCount({
  count,
}: {
  count: number;
}) {
  return (
    <T>{{ count, format: 'plural, =0{No messages} =1{One message} other{{count} messages}' }}</T>
  );
}

Fechas y dinero

Si pasas un Date real o un objeto similar al dinero con amount y currency, 18ways lo formateará automáticamente incluso con un marcador de posición simple como {publishedAt} o {renewalTotal}.

Utiliza el formateador explícito solo cuando quieras controlar la salida, como dateStyle:long o un divisor de dinero personalizado.

tsx
'use client';
 
import { T } from '@18ways/react';
 
export function BillingSummary() {
  const publishedAt = new Date(
    '2026-03-14T09:00:00Z'
  );
  const renewalTotal = {
    amount: 1900,
    currency: 'USD',
  };
 
  return (
    <>
      <p>
        <T>Last updated {{ publishedAt }}</T>
      </p>
      <p>
        <T>Renewal total {{ renewalTotal }}</T>
      </p>
      <p>
        <T>Detailed date: {{ publishedAt, format: 'date, long' }}</T>
      </p>
    </>
  );
}

Por defecto, las cantidades de dinero se tratan como unidades menores. Si ya tiene unidades mayores, utilice el formateador de dinero explícito con divisor: 1.

Bloques de selección

Utiliza select cuando la copia dependa de un pequeño conjunto de valores discretos.

tsx
import { T } from '@18ways/react';
 
export function SignInState({
  isSignedIn,
}: {
  isSignedIn: boolean;
}) {
  return (
    <T vars={{ name: 'Ada' }}>
      {{
        isSignedIn,
        format:
          'select, true{Welcome back, {name}} false{Sign in to continue} other{Sign in to continue}',
      }}
    </T>
  );
}

Composición de componentes

Mantén la oración unida en JSX y 18ways preservará la estructura real de la interfaz de usuario para casos comunes como <T><a href="#">Haz clic aquí</a> para ver más</T> sin que tengas que unir fragmentos manualmente.

tsx
'use client';
 
import Link from 'next/link';
import { T } from '@18ways/react';
 
export function HeroCta() {
  return (
    <T>
      <Link href="/pricing">Click here</Link> to
      see more
    </T>
  );
}

Desactivando el analizador

@18ways/react te permite establecer messageFormatter="none" en la raíz o proporcionar una función de formateador personalizada. Eso es una salida avanzada, no el camino por defecto.

Regla práctica

Si la oración puede escribirse como una frase completa con algunas variables, mantenla en un solo mensaje. Eso mejora drásticamente la calidad de la traducción en comparación con unir fragmentos en código.

Message Formatting