OriaTheme
GitHub

APIリファレンス · React

@oriatheme/react

プロバイダーとフックを使用して、1 つのランタイム外部ストアを React に接続します。 2 番目のステートマシンはありません。

パッケージと環境

React 18.2 または 19 のブラウザ プロバイダー。モジュール自体は SSR に対して安全にインポートできます。

bash
pnpm add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

コンシューマ プロジェクトによってすでに選択されているパッケージ マネージャーとロックファイルを使用します。例では、パッケージ ルート エクスポートのみを使用します。 src、dist、またはレジストリ テンプレートからディープ インポートしないでください。

Exports

エクスポート署名説明
OriaThemeProvider({ config, runtime?, children }: OriaThemeProviderProps) => ReactElement所有されているランタイムを開始するか、提供されたランタイムを子孫に使用します。
useOriaTheme() => { snapshot, runtime, setTheme, setAppearance }完全な不変ランタイムスナップショットとバインドされたアクションを読み取ります。
useThemeSnapshot<T>(selector, isEqual?) => T等しい参照を維持しながらスナップショット スライスを選択します。
tsx
import { OriaThemeProvider, useOriaTheme } from "@oriatheme/react";

function Controls() {
  const { setAppearance, setTheme } = useOriaTheme();
  return <button onClick={() => setTheme("oria-ocean")}>Ocean</button>;
}

重要な種類と境界

OriaThemeProviderProps は、OriaThemeConfig または外部の OriaThemeRuntime を受け入れます。プロバイダーはクライアント上にのみマウントします。次の最初のペイントでは、検証されたデフォルト変数と Bootstrap スクリプトを最初に出力します。