Uso de React

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

Modo raíz vs modo de alcance

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 anidados Ways 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 de locale con alcance:

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

Estado de carga

Si deseas 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 rastrea el trabajo bloqueante para 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.

Suspenso

<T> y useT() lanzan al boundary más cercano de React o del framework cuando una lectura que no es de transición todavía está pendiente. Durante una transición de locale real, siguen renderizando el locale anterior ya resuelto mediante el fallback de la store, en lugar de suspender. El trabajo bloqueante está limitado por suspenseTimeoutMs; después de eso, el renderizado continúa con el mejor fallback disponible mientras la carga de la traducción sigue 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 controlado y componible.

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

Lee la lista de configuraciones regionales aceptadas desde el runtime raíz y maneja 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 ya 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