API參考·React

@oriatheme/react

使用 Provider 和 Hooks 將一個運行時外部儲存連接到 React；沒有第二個狀態機。

包裝及環境

React 18.2 或 19 的瀏覽器提供者；模組本身是 SSR 安全的，可以安全導入。

bash

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

bash

npm install @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

bash

yarn add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

bash

bun 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。僅在客戶端掛載Provider；對於下一步第一次繪製，首先輸出經過驗證的預設變數和 Bootstrap 腳本。