React-Nutzung

@18ways/react bietet Ihnen die Laufzeit-Primitiven. Die Hauptaufgabe besteht darin, sie sauber zu scopen.

Root-Modus vs. Scope-Modus

Im Kern besitzt Ways den API-Schlüssel, die Locale, die akzeptierten Locales und den gemeinsamen Übersetzungsspeicher.

Verschachtelte Ways-Scopes benötigen nur Kontext:

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

Wenn ein Teilbaum eine eigene Locale-Session benötigt, geben Sie ihm eine eigene Wurzel, anstatt sich auf ein Scoped- locale-Override zu verlassen:

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>

Diese verschachtelte Root hat ihr eigenes ausgewähltes Gebietsschema, ihren eigenen Ladezustand und ihren eigenen hydratisierten Store.

Ladezustand

Wenn Sie die Übersetzungsarbeit in der Benutzeroberfläche widerspiegeln möchten, verwenden Sie useTranslationLoading().

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

useTranslationLoading() verfolgt nur blockierende Arbeiten für den aktuellen Kontext. Steuerungen auf Root-Ebene wie LanguageSwitcher lesen den Ladezustand der Root-Laufzeit bereits für dich aus.

Spannung

<T> und useT() werfen an die nächstgelegene React- oder Framework-Grenze, wenn ein nicht-übergangsbezogenes Lesen noch aussteht. Während eines echten Gebietsschema-Übergangs rendern sie weiterhin das zuvor abgeschlossene Gebietsschema über den Store-Fallback, statt zu suspendieren. Blockierende Arbeit wird durch suspenseTimeoutMs begrenzt; danach wird das Rendern mit dem bestmöglichen Fallback fortgesetzt, während das Laden der Übersetzungen im Hintergrund weiterläuft.

Locale-Hooks

Die Root-Laufzeit stellt zwei Low-Level-Hooks zur Verfügung:

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

Verwenden Sie sie, wenn Sie Ihre eigenen Gebietsschema-Steuerelemente anstelle von LanguageSwitcher erstellen möchten.

LanguageSwitcher

Der integrierte Schalter ist steuerbar und zusammensetzbar.

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

Es liest die akzeptierte Gebietsschemata-Liste aus dem Root-Runtime und behandelt Ladezustände, während das nächste Gebietsschema aufgelöst wird. Während eines Gebietsschemawechsels verwendet die übersetzte UI weiterhin das zuletzt festgelegte Gebietsschema als Fallback, bis das nächste Gebietsschema bereit ist.

Komponentenkomposition

Halten Sie den Satz zusammen und lassen Sie <T> die UI-Form bewahren.

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

Nachricht Formatter Ausstiegsmöglichkeiten

Der Standard-Formatter ist waysParser. Wechseln Sie nur dann davon ab, wenn Sie einen konkreten Grund haben.

  • messageFormatter="none" lässt Zeichenfolgen unverändert.
  • Eine benutzerdefinierte Formatierungsfunktion ermöglicht es Ihnen, die Interpolation vollständig zu kontrollieren.

Das sollte selten sein.

React-Verwendung