Formatação de mensagem

18ways usa waysParser por padrão. Esse parser é o que permite que você mantenha a cópia de origem legível enquanto ainda lida com variáveis e formatação sensível ao local.

Variáveis

Use chaves para variáveis e passe valores através de vars.

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

Pluralização

Use blocos de plural no estilo ICU quando a frase realmente mudar 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>
  );
}

Datas e dinheiro

Se você passar um Date real ou um objeto semelhante a dinheiro com amount e currency, 18ways irá formatá-lo automaticamente, mesmo com um espaço reservado simples como {publishedAt} ou {renewalTotal}.

Use o formatador explícito apenas quando você quiser controlar a saída, como dateStyle:long ou um divisor de dinheiro personalizado.

'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 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 padrão, os valores monetários são tratados como unidades menores. Se você já possui unidades maiores, use o formatador de moeda explícito com divisor: 1.

Blocos de seleção

Use select quando a cópia depende de um pequeno 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>
  );
}

Composição de componentes

Mantenha a frase unida em JSX e 18ways preservará a verdadeira estrutura de UI para casos comuns como <T><a href="#">Clique aqui</a> para ver mais</T> sem que você tenha que costurar fragmentos juntos manualmente.

'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>
  );
}

Desligando o analisador

@18ways/react permite que você defina messageFormatter="none" na raiz ou forneça uma função de formatador personalizada. Isso é uma saída avançada, não o caminho padrão.

Regra prática

Se a frase puder ser escrita como uma frase completa com algumas variáveis, mantenha-a em uma única mensagem. Isso torna a qualidade da tradução dramaticamente melhor do que juntar fragmentos em código.