OriaTheme
GitHub

API 参考 · React 编辑桥接

@oriatheme/react-editor

为本地源码 ThemeEditor 提供 React session Provider、订阅与自动预览协调；不导出可视 UI。

包与运行环境

React 18.2 或 19 的客户端桥接；使用本地 CLI 安装的 ThemeEditor 作为可视根。

bash
pnpm add @oriatheme/editor-core @oriatheme/react-editor

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

Exports

出口签名描述
ThemeEditorProvider({ session?, options?, children }) => ReactElement提供调用方会话或为子树拥有一个调用方会话。
useThemeEditor() => { session, snapshot }直接订阅编辑器核心不可变状态。
useThemeEditorAutoPreview(runtime?, mode?) => ThemeEditorAutoPreviewState合并每个动画帧的有效修订。
re-exported editor-core typesThemeEditorOptions, ThemeEditorSession, …便利类型/域再导出；行为仍保留在编辑器核心中。
tsx
import { ThemeEditorProvider, useThemeEditorAutoPreview } from "@oriatheme/react-editor";

function Bridge({ runtime }: { runtime: OriaThemeRuntime }) {
  const preview = useThemeEditorAutoPreview(runtime);
  return <span>{preview.status}</span>;
}

可视 UI 位于你的项目

此包不导出 Toolbar、Tabs、字段或 CSS。用 CLI 将组件复制到 components/oria-theme-editor，再让路由只组合本地 ThemeEditor、Runtime 和 options。