Uso de React

@18ways/react te proporciona los primitivos de tiempo de ejecución. La tarea principal es definir su ámbito de manera clara.

Modo raíz vs modo de ámbito

En la raíz, Ways posee la clave de API, la configuración regional, las configuraciones regionales aceptadas y el almacén de traducciones compartido.

Los ámbitos Ways anidados solo necesitan contexto:

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

Si un subárbol necesita su propia sesión de configuración regional, dale su propia raíz en lugar de depender de una anulación limitada de 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>

Esa raíz anidada obtiene su propia configuración regional seleccionada, estado de carga y almacén hidratado.

Estado de carga

Si quieres reflejar el trabajo de traducción en la interfaz de usuario, utiliza useTranslationLoading().

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

useTranslationLoading() solo hace seguimiento del trabajo que bloquea el contexto actual. Los controles de nivel raíz como LanguageSwitcher ya leen por ti el estado de carga en tiempo de ejecución de la raíz.

Suspense

<T> y useT() lanzan el error al límite más cercano de React o del framework cuando una lectura que no es de transición sigue pendiente. Durante una transición real de configuración regional, siguen renderizando la configuración regional establecida anterior mediante la alternativa de reserva del almacén en lugar de suspender. El trabajo bloqueante está limitado por suspenseTimeoutMs; después de eso, el renderizado continúa con la mejor alternativa de reserva disponible mientras la carga de la traducción continúa en segundo plano.

Ganchos de localización

El runtime raíz expone dos ganchos de bajo nivel:

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

Úsalos cuando quieras construir tus propios controles de localización en lugar de LanguageSwitcher.

LanguageSwitcher

El conmutador integrado es controlable y componible.

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

Lee la lista de configuraciones regionales aceptadas del runtime raíz y gestiona los estados de carga mientras se resuelve la siguiente configuración regional. Durante una transición de configuración regional, la interfaz de usuario traducida sigue usando la última configuración regional establecida como respaldo hasta que la siguiente configuración regional esté lista.

Composición de componentes

Mantén la oración unida y deja que <T> preserve la forma de la interfaz.

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

Salidas de escape del formateador de mensajes

El formateador predeterminado es waysParser. Solo cámbialo si tienes una razón concreta.

  • messageFormatter="none" deja las cadenas sin cambios.
  • una función de formateador personalizada te permite tener el control total de la interpolación.

Eso debería ser raro.

Uso de React