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:

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

Se uma subárvore precisar da sua própria sessão de locale, dê-lhe a sua própria raiz em vez de depender de uma substituição com âmbito 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>

Essa raiz aninhada tem a sua própria locale selecionada, estado de carregamento e store hidratada.

Estado de carregamento

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

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

useTranslationLoading() só monitoriza o trabalho bloqueante para o contexto atual. Os controlos ao nível da raiz como LanguageSwitcher já leem por si o estado de carregamento da execução na raiz.

Suspense

<T> e useT() lançam para o boundary mais próximo do React ou do framework quando uma leitura sem transição ainda está pendente. Durante uma transição de locale real, continuam a renderizar o locale anterior já resolvido através do fallback da store, em vez de suspender. O trabalho bloqueante é limitado por suspenseTimeoutMs, após o que a renderização prossegue com o melhor fallback disponível enquanto o carregamento da tradução continua em segundo plano.

Ganchos de localidade

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

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

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

Lê a lista de locais aceites do runtime raiz e trata dos estados de carregamento enquanto a próxima localização é resolvida. Durante uma transição de localização, a interface traduzida continua a usar a última localização estável como fallback até a próxima localização estar pronta.

Composição de componentes

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

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

Utilização do React