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, 런타임 및 옵션만 구성하도록 합니다.