Uso do React

@18ways/react fornece-lhe os primitivos de tempo de execução. O principal trabalho é delimitá-los de forma clara.

Modo raiz vs modo de escopo

No fundo, Ways possui a chave da API, o locale, os locales aceites e o armazenamento de traduções partilhado.

Os escopos Ways aninhados só precisam de 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 carregamento

Se quiser refletir o trabalho de tradução na interface do utilizador, use useTranslationLoading().

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

Ganchos de localidade

A runtime raiz expõe dois ganchos de baixo nível:

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

Use-os quando quiser construir os seus próprios controlos de localidade em vez de LanguageSwitcher.

LanguageSwitcher

O comutador integrado é controlado e composável.

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

Lê a lista de locais aceites a partir do runtime raiz e gere os estados de carregamento enquanto o próximo local é resolvido.

Composição de componentes

Mantenha a frase unida e deixe <T> preservar a forma da interface.

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

Saídas de escape do formatador de mensagens

O formatador padrão é waysParser. Só mude para outro se tiver uma razão concreta.

• messageFormatter="none" deixa as strings inalteradas.
• uma função de formatador personalizada permite que você controle totalmente a interpolação.

Isso deve ser raro.