संदेश स्वरूपण

18ways डिफ़ॉल्ट रूप से waysParser का उपयोग करता है। वही पार्सर है जो आपको सोर्स कॉपी को पठनीय बनाए रखने देता है और साथ ही variables तथा locale-aware formatting को संभालता है.

चर

वेरिएबल्स के लिए ब्रेसेज़ का उपयोग करें। <T> के साथ, आप मान को संदेश के साथ इनलाइन रख सकते हैं।

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

बहुवचन

जब वाक्य का रूप सचमुच बदलता हो, तब ICU-शैली के बहुवचन ब्लॉक इस्तेमाल करें.

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

तारीख़ें और पैसे

यदि आप एक असली Date या amount और currency वाला धन-समान ऑब्जेक्ट पास करते हैं, तो 18ways उसे अपने-आप फ़ॉर्मैट करेगा यहाँ तक कि {publishedAt} या {renewalTotal} जैसे साधारण प्लेसहोल्डर के साथ भी।

आउटपुट पर नियंत्रण रखना चाहें, तभी explicit formatter का उपयोग करें, जैसे dateStyle:long या एक कस्टम money divisor.

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

डिफ़ॉल्ट रूप से, धनराशियों को लघु इकाइयों के रूप में माना जाता है। यदि आपके पास पहले से ही प्रमुख इकाइयाँ हैं, तो divisor: 1 के साथ स्पष्ट मनी फ़ॉर्मैटर का उपयोग करें।

ब्लॉक चुनें

जब कॉपी कुछ चुनिंदा, अलग-अलग मानों के छोटे सेट पर निर्भर हो, तब select का उपयोग करें।

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

घटक संरचना

वाक्य को JSX में एक साथ रखें, और 18ways सामान्य मामलों के लिए वास्तविक UI संरचना को बरकरार रखेगा जैसे <T><a href="#">यहाँ क्लिक करें</a> और अधिक देखने के लिए</T> ताकि आपको टुकड़ों को हाथ से जोड़ना न पड़े।

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

पार्सर को बंद करना

@18ways/react आपको रूट पर messageFormatter="none" सेट करने देता है या एक कस्टम फ़ॉर्मैटर फ़ंक्शन देने देता है। यह एक उन्नत एस्केप हैच है, डिफ़ॉल्ट रास्ता नहीं।

व्यावहारिक नियम

अगर वाक्य को कुछ variables के साथ एक पूरे वाक्यांश के रूप में लिखा जा सकता है, तो उसे एक ही message में रखें। इससे translation quality code में fragments को जोड़कर बनाने की तुलना में बहुत ज़्यादा बेहतर हो जाती है.