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:

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

Ladezustand

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

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

Locale-Hooks

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

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.

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

Es liest die akzeptierte Gebietsschema-Liste aus der Root-Laufzeit und verwaltet die Ladezustände, während das nächste Gebietsschema aufgelöst wird.

Komponentenkomposition

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

<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.