API-Referenz · React-Editor-Brücke

@oriatheme/react-editor

React Sitzungsanbieter, Abonnement und automatische Vorschaukoordination für einen lokalen Quell-ThemeEditor; Es wird keine sichtbare Benutzeroberfläche exportiert.

Paket und Umgebung

React 18.2 oder 19 Client-Bridge; Verwenden Sie einen lokal über die CLI installierten ThemeEditor als sichtbares Stammverzeichnis.

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

Verwenden Sie den Paketmanager und die Sperrdatei, die bereits vom Verbraucherprojekt ausgewählt wurden. Beispiele verwenden nur Paket-Root-Exporte; Führen Sie keinen Deep-Import aus src-, dist- oder Registry-Vorlagen durch.

Exports

Exportieren	Unterschrift	Beschreibung
`ThemeEditorProvider`	`({ session?, options?, children }) => ReactElement`	Stellt eine Anrufersitzung bereit oder besitzt eine für den Unterbaum.
`useThemeEditor`	`() => { session, snapshot }`	Abonniert direkt den unveränderlichen Editor-Core-Status.
`useThemeEditorAutoPreview`	`(runtime?, mode?) => ThemeEditorAutoPreviewState`	Führt gültige Revisionen pro Animationsframe zusammen.
`re-exported editor-core types`	`ThemeEditorOptions, ThemeEditorSession, …`	Convenience-Typ-/Domain-Reexporte; Verhalten bleibt im Editor-Core.

tsx

import { ThemeEditorProvider, useThemeEditorAutoPreview } from "@oriatheme/react-editor";

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

Die sichtbare Benutzeroberfläche befindet sich in Ihrem Projekt

Dieses Paket exportiert keine Symbolleiste, Registerkarten, Felder oder CSS. Verwenden Sie die CLI, um Komponenten in „components/oria-theme-editor“ zu kopieren, und lassen Sie Routen dann nur den lokalen ThemeEditor, die Laufzeit und die Optionen erstellen.