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:

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ê a ela sua própria raiz em vez de depender de uma substituição de locale com escopo:

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 recebe seu próprio locale selecionado, estado de carregamento e store hidratado.

Carregando estado

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

tsx

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

useTranslationLoading() rastreia apenas o trabalho bloqueante para o contexto atual. Controles no nível da raiz como LanguageSwitcher já leem o estado de carregamento em tempo de execução da raiz para você.

Suspense

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

Ganchos de localidade

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

tsx

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.

tsx

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

Ele lê a lista de localidades aceitas do runtime raiz e lida com estados de carregamento enquanto a próxima localidade é resolvida. Durante uma transição de localidade, a interface traduzida continua usando a última localidade estabilizada como fallback até que a próxima localidade esteja 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 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.