OriaTheme
GitHub

API リファレンス · React エディター ブリッジ

@oriatheme/react-editor

React セッション プロバイダー、サブスクリプション、およびローカル ソース ThemeEditor の自動プレビューの調整。表示される UI はエクスポートされません。

パッケージと環境

React 18.2 または 19 クライアント ブリッジ。ローカルに CLI でインストールされた ThemeEditor を表示ルートとして使用します。

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

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

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 はプロジェクト内に存在します

このパッケージは、ツールバー、タブ、フィールド、または CSS をエクスポートしません。 CLI を使用してコンポーネントをコンポーネント/oria-theme-editor にコピーし、ルートでローカルの ThemeEditor、ランタイム、およびオプションのみを構成できるようにします。