Formato de mensaje

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

Variables

Utiliza llaves para las variables y pasa valores a través de vars.

import { useT } from '@18ways/react';
 
export function WelcomeMessage() {
  const t = useT();
 
  return (
    <p>
      {t('Welcome back, {name}', {
        vars: { name: 'Ada' },
      })}
    </p>
  );
}

Pluralización

Utiliza bloques de plural estilo ICU cuando la oración realmente cambie de forma.

import { T } from '@18ways/react';
 
export function InboxCount({
  count,
}: {
  count: number;
}) {
  return (
    <T vars={{ count }}>
      {
        '{count, 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 desees controlar la salida, como dateStyle:long o un divisor de dinero personalizado.

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 vars={{ publishedAt }}>
          Last updated {publishedAt}
        </T>
      </p>
      <p>
        <T vars={{ renewalTotal }}>
          Renewal total {renewalTotal}
        </T>
      </p>
      <p>
        <T vars={{ publishedAt }}>
          {
            'Detailed date: {publishedAt, date, dateStyle:long}'
          }
        </T>
      </p>
    </>
  );
}

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

Bloques de selección

Usa select cuando la copia depende de un pequeño conjunto de valores discretos.

import { T } from '@18ways/react';
 
export function SignInState({
  isSignedIn,
}: {
  isSignedIn: boolean;
}) {
  return (
    <T vars={{ isSignedIn, name: 'Ada' }}>
      {
        '{isSignedIn, 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.

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

Apagar 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.