API 参考 · React

@oriatheme/react

将同一个 Runtime 外部 store 接入 React 的 Provider 与 Hooks；不包含第二套状态机。

包与运行环境

React 18.2 或 19 的浏览器 Provider；模块本身可 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

选择使用方项目已有的一种包管理器和 lockfile；示例只使用 package root export，不要从 src、dist 或 registry template 深层导入。

Exports

Export	Signature	Description
`OriaThemeProvider`	`({ config, runtime?, children }: OriaThemeProviderProps) => ReactElement`	Starts an owned runtime or uses the supplied runtime for descendants.
`useOriaTheme`	`() => { snapshot, runtime, setTheme, setAppearance }`	Reads the full immutable runtime snapshot and bound actions.
`useThemeSnapshot`	`<T>(selector, isEqual?) => T`	Selects a snapshot slice while preserving equal references.

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 只应在客户端挂载；在 Next 首屏先输出已验证的默认变量和 Bootstrap script。