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 locale-aware na pag-format.

Mga variable

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

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

Pagpaparami

Gumamit ng mga plural block na estilo ICU kapag talagang 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 totoong Date o ng object na parang pera na may amount at currency, awtomatikong iho-format ito ng 18ways kahit sa simpleng placeholder lang na tulad ng {publishedAt} o {renewalTotal}.

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

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 hayagang money formatter na may divisor: 1.

Pumili ng mga bloke

Gamitin ang select kapag nakadepende ang copy sa isang maliit na hanay ng magkakahiwalay na values.

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 mga bahagi

Panatilihing buo ang pangungusap sa JSX at pananatilihin ng 18ways ang tunay na estruktura ng UI para sa mga karaniwang kaso na tulad ng <T><a href="#">Mag-click dito</a> para makakita ng higit pa</T> nang hindi mo kailangang pagdugtung-dugtungin ang mga fragment sa pamamagitan ng 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 ng parser

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

Praktikal na panuntunan

Kung ang pangungusap ay maisusulat bilang isang kumpletong parirala na may ilang variable, panatilihin ito sa iisang mensahe. Mas napapabuti nito nang husto ang kalidad ng salin kaysa sa pagdugtung-dugtungin ang mga piraso sa code.

Pag-format ng Mensahe