React 启动与演示

在您希望在 React 中使用 18ways 运行时而不使用 Next 特定适配器层时，请使用此轨道。

安装

bash

npm install @18ways/react

基础翻译游乐场

可编辑的游乐场源代码

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>
  );
}

预览

从那里，在使用页面中添加 useT()、嵌套上下文和自定义区域设置控制。

下一步: React 使用