React

@tanrei/react は、@tanrei/web の各カスタム要素を、型付きのプロパティとイベントハンドラーを持つ本物の React コンポーネントでラップします。ラッパーはカスタム要素のマニフェストから生成されるので、ラップしている要素と常に一致します。

プレリリース

0.1.0-next.0 を npm の dist-tag next で公開しています。0.1.0 までは @tanrei/react@next、@tanrei/web@next をインストールしてください。0.x のプレリリースのあいだは後方互換を保ちません。どのプレリリースも、先に非推奨の期間を置くことなく何でも壊すことがあり、何を壊したかはその changeset に書いてあります。

インストール

React 18 以降が必要です。

npm から

npm install @tanrei/react @tanrei/web

ソースから

main のソースを使うには、Web のパッケージと同じく（Git、Node 22.22 以降、pnpm 12）、リポジトリのクローンで 2 つのパッケージをビルドしてパックします。

git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/web --filter @tanrei/react build
pnpm --filter @tanrei/web --filter @tanrei/react pack --pack-destination ../tanrei-packages

次に、パックした 2 つのファイルを 1 つのコマンドでプロジェクトにインストールします。こうすると、React のパッケージが隣にある Web のパッケージを見つけられます。

npm install path/to/tanrei-packages/tanrei-web-*.tgz path/to/tanrei-packages/tanrei-react-*.tgz

使い方

コンポーネントが描画される前に、スタイルシートを一度だけ読み込みます。tanrei.css は、ページのベース、トークン、パッケージのほかのすべてのスタイルシートを 1 つにまとめたファイルです。1 つずつ読み込む方法は Web のガイドを参照してください。

import '@tanrei/web/tanrei.css';
import '@tanrei/web/words/en';
import { Button } from '@tanrei/react';

export function Toolbar({ onDeploy }: { onDeploy: () => void }) {
  return (
    <>
      <Button variant="filled" onClick={onDeploy}>
        デプロイ
      </Button>
      <Button variant="text" size="small" disabled>
        ロールバック
      </Button>
    </>
  );
}

プロパティの名前は、要素の属性と同じです（variant、size、disabled）。イベントは、通常の React のハンドラーです。要素が独自に出すイベントは、React 自身のイベントと同じく、on にイベント名をキャメルケースで続けた名前で受け取ります（onKeyDown と同じ形）。ナビゲーションドロワーが出す expandedchange は onExpandedChange です。

@tanrei/web/words/en は、コンポーネントが描いたり読み上げたりするラベルとメッセージ（必須のタグや閉じるボタンの名前など）のすべてに、平易な英語の言葉を渡します。使わずに、@tanrei/react の setWords() で自分の言葉を渡してもかまいません。言葉を参照してください。

デザインシステムごとのエントリー

このパッケージには、Tanrei が出荷するデザインシステムごとにエントリーがあります。エディターが候補に出し、型チェックが通すのは、あなたのシステムにあるものだけです。

エントリー	エクスポートするもの
`@tanrei/react`	既定のシステム Tanrei のコンポーネント。m3-like レイヤーにある FAB メニューと、Tanrei が持たないセグメントボタンはここにありません。Tanrei が持たないバリアントも、プロパティの値になりません。`<TextField variant="outlined">` は型チェックを通りません
`@tanrei/react/m3-like`、`@tanrei/react/m3-expressive-like`、`@tanrei/react/cupertino`	そのプリセットのコンポーネントと、そのバリアント
`@tanrei/react/advanced`	上級者向けのコンポーネント、つまりほかのコンポーネントの部品です。`TextInput`、`ModalLayer`、`Combobox` など。プロダクトでは、ふつうはそれから作られたコンポーネント（`TextField`、`Dialog`、`ComboboxField`）を書きます
`@tanrei/react/all`	どのシステムにあるかを問わず、すべてのコンポーネント。独自のデザインシステムで使うときと、デザインシステムを作るときのためのものです

import '@tanrei/web/tokens.css';
import '@tanrei/web/systems/m3-like.css';
import { FabMenu, FabMenuItem, TextField } from '@tanrei/react/m3-like';

コンポーネントはどのエントリーでも同じものなので、バンドラーが残すのは、インポートしたものだけです。どのエントリーも setWords、missingWords と TanreiEvent 型をエクスポートします。エントリーは、各システムのコンポーネント一覧（@tanrei/web/systems/<id>.components.json）から生成されます。この一覧には、各コンポーネントのエントリー（react.import）が書かれています。tanrei build が書く独自のシステムの一覧では、それは @tanrei/react/all です。

サーバーレンダリング

コンポーネントは、サーバーではカスタム要素のタグをレンダリングし、ブラウザーでアップグレードされます。サーバーとクライアントが分かれているフレームワークでは、使うエントリーをクライアントコンポーネントからインポートして、要素の定義がブラウザーで登録されるようにしてください。

ノート

テーマ、コントラスト、トークン、フォントは、Web のガイドに書かれているとおりに動作します。React のパッケージが独自に加えるものはありません。

ソースコードと Issue（GitHub）