ری ایکٹ کا استعمال

@18ways/react آپ کو رن ٹائم پرائمٹوز دیتا ہے۔ اصل کام یہ ہے کہ انہیں صاف ستھرا انداز میں محدود کیا جائے۔

روٹ موڈ بمقابلہ اسکوپ موڈ

بنیاد میں، Ways API کلید، لوکیل، قبول شدہ لوکیلز، اور مشترکہ ترجمہ اسٹور کا مالک ہوتا ہے۔

نیسٹڈ Ways اسکوپس کو صرف سیاق کی ضرورت ہوتی ہے:

tsx
<Ways apiKey="pk_dummy_demo_token" locale="es-ES" baseLocale="en-GB" context="checkout">
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

اگر کسی سب ٹری کو اپنی الگ لوکیل سیشن درکار ہو، تو اسے scoped locale override پر انحصار کرنے کے بجائے اپنا الگ root دیں:

tsx
<Ways apiKey="pk_dummy_demo_token" locale="en-GB" baseLocale="en-GB" context="app">
  <MarketingSite />
 
  <Ways apiKey="pk_dummy_demo_token" locale="ja-JP" baseLocale="en-GB" context="hero-demo">
    <EmbeddedLocaleDemo />
  </Ways>
</Ways>

اس nested root کو اپنی منتخب لوکیل، لوڈنگ حالت، اور hydrated store ملتا ہے۔

لوڈ ہو رہا ہے

اگر آپ UI میں ترجمے کے کام کی عکاسی کرنا چاہتے ہیں، تو useTranslationLoading() استعمال کریں۔

tsx
import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading = useTranslationLoading();
 
  return <span>{isTranslationLoading ? 'Loading translations...' : 'Ready'}</span>;
}

useTranslationLoading() صرف موجودہ context کے لیے بلاک کرنے والے کام کو ٹریک کرتا ہے۔ LanguageSwitcher جیسے روٹ-لیول کنٹرولز آپ کے لیے پہلے ہی روٹ رن ٹائم کی لوڈنگ حالت پڑھتے ہیں۔

سسپنس

<T> اور useT() جب کوئی غیر-منتقلی ریڈ ابھی زیرِ التوا ہو تو قریب ترین React یا فریم ورک باؤنڈری پر throw کرتے ہیں۔ ایک حقیقی لوکیل منتقلی کے دوران، وہ اسٹور کے فال بیک کے ذریعے پچھلا طے شدہ لوکیل ہی رینڈر کرتے رہتے ہیں، بجائے اس کے کہ suspended ہوں۔ بلاک کرنے والا کام suspenseTimeoutMs تک محدود ہے، جس کے بعد رینڈرنگ بہترین دستیاب فال بیک کے ساتھ جاری رہتی ہے جبکہ ترجمے کی لوڈنگ پسِ منظر میں چلتی رہتی ہے۔

لوکیل ہکس

روٹ رن ٹائم دو لو-لیول ہکس فراہم کرتا ہے:

tsx
import { useCurrentLocale, useSetCurrentLocale } from '@18ways/react';

جب آپ LanguageSwitcher کے بجائے اپنی لوکیل کنٹرولز خود بنانا چاہیں تو ان کا استعمال کریں۔

LanguageSwitcher

بلٹ اِن سوئچر کنٹرولڈ اور کمپوز ایبل ہے۔

tsx
<LanguageSwitcher currentLocale={locale} onLocaleChange={setLocale} direction="down" />

یہ روٹ رن ٹائم سے قبول شدہ لوکیلز کی فہرست پڑھتا ہے اور لوڈنگ کی حالتوں کو اس وقت سنبھالتا ہے جب اگلا لوکیل حل ہو رہا ہوتا ہے۔ لوکیل کی منتقلی کے دوران، ترجمہ شدہ UI آخری طے شدہ لوکیل کو اپنے فال بیک کے طور پر استعمال کرتی رہتی ہے جب تک اگلا لوکیل تیار نہ ہو جائے۔

جزوی ترکیب

جملے کو ایک ساتھ رکھیں اور <T> کو UI کی شکل برقرار رکھنے دیں۔

tsx
<T>
  <a href="/pricing">Click here</a> to see more
</T>

میسج فارمیٹر کے لیے ای اسکیپ ہچز

ڈیفالٹ فارمیٹر waysParser ہے۔ اس سے صرف اسی صورت میں ہٹیں جب آپ کے پاس کوئی ٹھوس وجہ ہو۔

  • messageFormatter="none" سٹرنگز کو جوں کا توں چھوڑ دیتا ہے۔
  • ایک کسٹم فارمیٹر فنکشن آپ کو انٹرپولیشن پر مکمل کنٹرول دیتا ہے۔

وہ کم ہی ہونا چاہیے۔

React استعمال