Paggamit ng React

@18ways/react ang nagbibigay sa iyo ng mga runtime primitive. Ang pangunahing trabaho ay isaayos ang mga ito nang maayos ayon sa saklaw.

Root mode vs scope mode

Sa pinakapuno, ang Ways ang may-ari ng API key, locale, mga tinatanggap na locale, at shared translation store.

Ang mga nested na Ways scope ay kailangan lang ng konteksto:

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

Kung ang isang subtree ay nangangailangan ng sarili nitong locale session, bigyan ito ng sarili nitong root sa halip na umasa sa isang scoped locale override:

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>

Ang naka-nest na root na iyon ay may sarili nitong napiling locale, estado ng paglo-load, at hydrated na store.

Estado ng paglo-load

Kung gusto mong ipakita ang gawain sa pagsasalin sa UI, gamitin ang useTranslationLoading().

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

useTranslationLoading() ay nagta-track lang ng blocking na trabaho para sa kasalukuyang context. Ang mga kontrol sa root level gaya ng LanguageSwitcher ay binabasa na para sa iyo ang root runtime loading state.

Pananabik

<T> at useT() ay magti-throw papunta sa pinakamalapit na React o framework boundary kapag may non-transition read na pending pa rin. Sa isang tunay na locale transition, ipinagpapatuloy nila ang pag-render ng naunang settled na locale sa pamamagitan ng store fallback sa halip na mag-suspend. Ang blocking work ay nililimitahan ng suspenseTimeoutMs, pagkatapos nito ay magpapatuloy ang pag-render gamit ang pinakamainam na available na fallback habang nagpapatuloy ang paglo-load ng translation sa background.

Mga kawit ng lokal na wika

Inilalantad ng root runtime ang dalawang low-level na hook:

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

Gamitin ang mga ito kapag gusto mong bumuo ng sarili mong mga kontrol sa locale sa halip na LanguageSwitcher.

LanguageSwitcher

Ang built-in na switcher ay kontrolado at composable.

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

Binabasa nito ang tinatanggap na listahan ng locale mula sa root runtime at hinahawakan ang mga estado ng paglo-load habang niresolba ang susunod na locale. Sa panahon ng paglipat ng locale, patuloy na ginagamit ng isinaling UI ang huling naayos na locale bilang fallback nito hanggang handa na ang susunod na locale.

Komposisyon ng mga bahagi

Panatilihing magkakasama ang pangungusap at hayaang mapanatili ng <T> ang hugis ng UI.

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

Mga escape hatch ng message formatter

Ang default formatter ay waysParser. Lumihis lamang mula rito kung may malinaw kang dahilan.

  • messageFormatter="none" ay iniiwan ang mga string nang hindi binabago.
  • pinapayagan ka ng isang custom formatter function na ganap mong kontrolin ang interpolation.

Dapat bihira lang iyon.

Paggamit ng React