Uso do React

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

Modo raiz vs modo escopo

Na raiz, Ways possui a chave da API, o locale, os locales aceitos e o armazenamento de traduções compartilhado.

Escopos Ways aninhados precisam apenas de contexto:

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

Carregando estado

Se você quiser refletir o trabalho de tradução na interface do usuário, use useTranslationLoading().

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

Ganchos de localidade

O runtime raiz expõe dois hooks de baixo nível:

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

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

LanguageSwitcher

O comutador embutido é controlável e componível.

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

Ele lê a lista de locais aceitos a partir do tempo de execução raiz e gerencia 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 um motivo concreto.

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

Isso deve ser raro.