Utilisation de React

@18ways/react vous fournit les primitives d'exécution. Le principal objectif est de les définir clairement.

Mode racine vs mode de portée

À la base, Ways possède la clé API, la locale, les locales acceptées et le magasin de traductions partagé.

Les portées Ways imbriquées n'ont besoin que de contexte :

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

Si un sous-arbre a besoin de sa propre session de paramètres régionaux, donnez-lui sa propre racine au lieu de vous appuyer sur une surcharge de locale à portée locale :

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>

Cette racine imbriquée a sa propre locale sélectionnée, son état de chargement et son store hydraté.

État de chargement

Si vous souhaitez refléter le travail de traduction dans l'interface utilisateur, utilisez useTranslationLoading().

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

useTranslationLoading() ne suit que le travail bloquant pour le contexte actuel. Les contrôles au niveau racine comme LanguageSwitcher lisent déjà pour vous l’état de chargement de l’exécution racine.

Suspense

<T> et useT() lèvent une erreur vers la frontière React ou framework la plus proche lorsqu’une lecture hors transition est encore en attente. Pendant une véritable transition de locale, ils continuent à afficher la locale précédente déjà stabilisée via le repli du store au lieu de se suspendre. Le travail bloquant est plafonné par suspenseTimeoutMs, après quoi le rendu se poursuit avec le meilleur repli disponible pendant que le chargement de la traduction continue en arrière-plan.

Hooks de locale

Le runtime racine expose deux hooks de bas niveau :

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

Utilisez-les lorsque vous souhaitez créer vos propres contrôles de locale au lieu de LanguageSwitcher.

LanguageSwitcher

Le commutateur intégré est contrôlable et composable.

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

Il lit la liste des paramètres régionaux acceptés depuis le runtime racine et gère les états de chargement pendant que le prochain paramètre régional se résout. Lors d’une transition de paramètres régionaux, l’interface utilisateur traduite continue d’utiliser le dernier paramètre régional stabilisé comme solution de repli jusqu’à ce que le prochain paramètre régional soit prêt.

Composition des composants

Gardez la phrase ensemble et laissez <T> préserver la forme de l'interface utilisateur.

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

Échappatoires du formatage de message

Le formatteur par défaut est waysParser. Ne changez-le que si vous avez une raison concrète.

  • messageFormatter="none" laisse les chaînes intactes.
  • une fonction de formatage personnalisée vous permet de contrôler entièrement l'interpolation.

Cela devrait être rare.

Utilisation de React