スケジューラーとデータグリッドは、@needless-ui/react の React コンポーネントとしても使えます。機能、キーボード操作、アクセシビリティは Angular 版と同じで、スタイルシートと MIT ライセンスも共通です。ほかのコンポーネントも今後対応します。React 19 が必要で、Next.js App Router と Vite で動作します。
インストール
pnpm add @needless-ui/react @needless-ui/cssスタイルのインポート
コンポーネント自体にはスタイルが含まれていません。スタイルシートは、アプリの CSS ファイルで一度だけインポートします。
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';レイヤーの扱いは Angular と同じです。はじめにで説明しているとおり、リセットは nui より前に宣言したレイヤーに入れ、Tailwind CSS を使う場合は nui を Tailwind の base レイヤーとユーティリティの間に置きます。
スケジューラー
コンポーネントごとにエントリーポイントがあります。スケジューラーは渡された events を表示し、ユーザーが予定を動かしたときや新しい予定の時間を選んだときに、コールバックで知らせます。予定を保持するのはアプリ側です。
データグリッド
columns はコンポーネントの外で定義します。そうすれば、グリッドがレンダリングのたびに処理をやり直さずに済みます。編集すると新しい行を引数に onRowsChange が呼び出されます。Excel へのエクスポートなどのメソッドは、グリッドの ref から使えます。
React の流儀に合わせた API
React コンポーネントは Angular 版と同じ仕様に従っているため、API も React の流儀に置き換えた形で一致しています。すべての props は、スケジューラーとデータグリッドの API ページに載っています。
| Angular | React |
|---|---|
モデル：[(view)] | 状態：view と onViewChange、またはコンポーネントに保持させる defaultView |
出力：(eventClick) | コールバック：onEventClick |
テンプレート：<ng-template nuiSchedulerEvent> | 描画する関数：renderEvent |
メソッド：scheduler.next() | ref のメソッド：ref.current.next() |
ツリーデータ用の children | getChildren：React では children は要素のために使われます |
locale（デフォルトはアプリの LOCALE_ID） | locale（デフォルトは en-US） |
サーバーサイドレンダリング
どちらのコンポーネントもサーバーでレンダリングでき、ブラウザーでハイドレーションされます。パッケージがこれらをクライアントコンポーネントとして指定しているので、Server Component からはシリアライズできる props を渡してレンダリングでき、nuiSchedulerFromIcs などのヘルパーはサーバーで実行できます。コールバックはブラウザーに渡せません。コールバックを受け取るコンポーネントは、上の2つの例のように、独自のクライアントコンポーネントの中に置きます。
ユーザーの環境によって変わるものは、ブラウザーで表示されるまで待ちます。具体的には、スケジューラーの現在時刻を示す線と、今日がどの日かです。サーバーでスケジューラーをレンダリングする場合は defaultDate を渡してください。サーバーの「今日」がユーザーの今日と同じとは限らないためです。