React usage

@18ways/react gives you the runtime primitives. The main job is to scope them cleanly.

Root mode vs scope mode

At the root, Ways owns the API key, locale, accepted locales, and shared translation store.

Nested Ways scopes only need context:

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 मिलता है।

Loading state

If you want to reflect translation work in the UI, use 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 तक होती है, जिसके बाद अनुवाद लोडिंग बैकग्राउंड में चलती रहती है और रेंडरिंग उपलब्ध सर्वोत्तम फ़ॉलबैक के साथ जारी रहती है।

Locale hooks

The root runtime exposes two low-level hooks:

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

Use them when you want to build your own locale controls instead of LanguageSwitcher.

LanguageSwitcher

The built-in switcher is controlled and composable.

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

यह रूट रनटाइम से स्वीकृत लोकेल सूची पढ़ता है और अगली लोकेल के समाधान होने तक लोडिंग अवस्थाओं को संभालता है। लोकेल परिवर्तन के दौरान, अनुवादित UI पिछली स्थिर हुई लोकेल को अपनी फ़ॉलबैक के रूप में तब तक उपयोग करता रहता है जब तक अगली लोकेल तैयार न हो जाए।

Component composition

Keep the sentence together and let <T> preserve the UI shape.

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

Message formatter escape hatches

The default formatter is waysParser. Only switch away from it if you have a concrete reason.

  • messageFormatter="none" leaves strings alone.
  • a custom formatter function lets you own interpolation fully.

That should be rare.

भाषा बदली जा रही है
React उपयोग