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:

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

Estado de carga

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

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

Ganchos de localización

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

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.

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

Lee la lista de locales aceptados desde el runtime raíz y gestiona los estados de carga mientras se resuelve el siguiente locale.

Composición de componentes

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

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