रिएक्ट का उपयोग

@18ways/react आपको रनटाइम प्रिमिटिव्स देता है। मुख्य काम उन्हें साफ़-सुथरे ढंग से स्कोप करना है।

रूट मोड बनाम स्कोप मोड

मूल स्तर पर, Ways API key, locale, accepted locales और shared translation store का स्वामित्व रखता है।

नेस्टेड 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 ओवरराइड पर निर्भर रहने के बजाय उसे अपना अलग 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 को अपनी selected locale, loading state, और hydrated store मिलता है।

लोडिंग स्थिति

अगर आप UI में अनुवाद कार्य को दिखाना चाहते हैं, तो useTranslationLoading() का उपयोग करें।

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

useTranslationLoading() केवल मौजूदा संदर्भ के लिए ब्लॉकिंग काम को ट्रैक करता है। LanguageSwitcher जैसे root-स्तरीय controls पहले से ही आपके लिए root runtime की loading state पढ़ते हैं।

Suspense

<T> और useT() जब कोई गैर-ट्रांज़िशन पढ़ाई अभी भी लंबित हो, तो निकटतम React या फ़्रेमवर्क बाउंड्री पर throw करते हैं। वास्तविक लोकेल ट्रांज़िशन के दौरान, वे स्टोर फ़ॉलबैक के ज़रिए पिछली स्थिर हुई लोकेल को सस्पेंड किए बिना रेंडर करते रहते हैं। ब्लॉकिंग काम की अधिकतम सीमा 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 उपयोग