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

bash

npm install @oriatheme/editor-core @oriatheme/react-editor

bash

yarn add @oriatheme/editor-core @oriatheme/react-editor

bash

bun add @oriatheme/editor-core @oriatheme/react-editor

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

Exports

Export	Signature	Description
`ThemeEditorProvider`	`({ session?, options?, children }) => ReactElement`	Provides a caller session or owns one for the subtree.
`useThemeEditor`	`() => { session, snapshot }`	Subscribes directly to editor-core immutable state.
`useThemeEditorAutoPreview`	`(runtime?, mode?) => ThemeEditorAutoPreviewState`	Coalesces valid revisions per animation frame.
`re-exported editor-core types`	`ThemeEditorOptions, ThemeEditorSession, …`	Convenience type/domain re-exports; behavior remains in editor-core.

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。