Pag-format ng mensahe

Gumagamit ang 18ways ng waysParser bilang default. Ang parser na iyon ang nagbibigay-daan para manatiling madaling basahin ang source copy habang hinahawakan pa rin ang mga variable at pag-format na alam ang locale.

Mga Variable

Gumamit ng braces para sa mga variable. Sa <T>, puwede mong panatilihing inline ang value katabi ng mensahe.

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

Pagpaparami ng isahan sa maramihan

Gamitin ang mga plural block na estilo ng ICU kapag tunay na nag-iiba ang anyo ng pangungusap.

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

Mga petsa at pera

Kung magpapasa ka ng tunay na Date o ng object na parang pera na may amount at currency, awtomatikong ite-text format ng 18ways ito kahit may simpleng placeholder lang tulad ng {publishedAt} o {renewalTotal}.

Gamitin ang explicit formatter lang kapag gusto mong kontrolin ang output, tulad ng dateStyle:long o isang custom na divisor ng pera.

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

Bilang default, itinuturing ang mga halaga ng pera bilang mga minor unit. Kung mayroon ka nang mga major unit, gamitin ang explicit na money formatter na may divisor: 1.

Pumili ng mga bloke

Gamitin ang select kapag nakadepende ang kopya sa maliit na hanay ng magkakahiwalay na mga halaga.

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

Komposisyon ng bahagi

Panatilihing magkakasama ang pangungusap sa JSX at mapapanatili ng 18ways ang tunay na estruktura ng UI para sa mga karaniwang kaso tulad ng <T><a href="#">Mag-click dito</a> upang makakita pa ng iba</T> nang hindi mo kailangang pagdugtung-dugtungin ang mga piraso sa kamay.

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

Pag-off sa parser

@18ways/react ay nagbibigay-daan sa iyo na itakda ang messageFormatter="none" sa root o magbigay ng custom na formatter function. Isa iyon sa mga advanced na escape hatch, hindi ang default na daan.

Praktikal na tuntunin

Kung ang pangungusap ay puwedeng isulat bilang isang buong parirala na may ilang variable, panatilihin ito sa isang mensahe. Mas napapaganda nito nang malaki ang kalidad ng salin kaysa sa pagdugtung-dugtong ng mga pira-piraso sa code.

Pag-format ng Mensahe