React start at demo

Use this track when you want the 18ways runtime in React without the Next-specific adapter layer.

I-install

bash
npm install @18ways/react

Basic translation playground

Nae-edit na source ng playground
src/App.tsx
import { useState } from 'react';
import { LanguageSwitcher, T, Ways } from '@18ways/react';

export function App() {
  const [locale, setLocale] = useState('en-GB');

  return (
    <Ways
      apiKey="pk_dummy_demo_token"
      locale={locale}
      baseLocale="en-GB"
      acceptedLocales={['en-GB', 'en-GB-x-caesar']}
      persistLocaleCookie={false}
      context="docs.react.example"
    >
      <main className="react-demo-shell">
        <section className="react-demo-card">
          <p className="react-demo-eyebrow">@18ways/react</p>
          <h1 className="react-demo-title">
            <T>Hello world</T>
          </h1>
          <p className="react-demo-copy">
            <T>Translate React UI without writing translation keys.</T>
          </p>
        </section>
        <div className="react-demo-switcher">
          <LanguageSwitcher currentLocale={locale} onLocaleChange={setLocale} />
        </div>
      </main>
    </Ways>
  );
}

Preview

From there, add useT(), nested contexts, and custom locale controls in the Usage page.

Next: React usage

Pinapalitan ang wika
React Start & Demo