OriaTheme
GitHub

API 참조 · React

@oriatheme/react

공급자 및 후크를 사용하여 하나의 런타임 외부 저장소를 React에 연결합니다. 두 번째 상태 머신이 없습니다.

패키지 및 환경

React 18.2 또는 19용 브라우저 공급자; 모듈 자체는 가져오기에 SSR 안전합니다.

bash
pnpm add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

소비자 프로젝트에서 이미 선택한 패키지 관리자와 잠금 파일을 사용하세요. 예제에서는 패키지 루트 내보내기만 사용합니다. src, dist 또는 레지스트리 템플릿에서 깊이 가져오지 마세요.

Exports

수출서명설명
OriaThemeProvider({ config, runtime?, children }: OriaThemeProviderProps) => ReactElement소유한 런타임을 시작하거나 하위 항목에 대해 제공된 런타임을 사용합니다.
useOriaTheme() => { snapshot, runtime, setTheme, setAppearance }변경할 수 없는 전체 런타임 스냅샷 및 바인딩된 작업을 읽습니다.
useThemeSnapshot<T>(selector, isEqual?) => T동일한 참조를 유지하면서 스냅샷 슬라이스를 선택합니다.
tsx
import { OriaThemeProvider, useOriaTheme } from "@oriatheme/react";

function Controls() {
  const { setAppearance, setTheme } = useOriaTheme();
  return <button onClick={() => setTheme("oria-ocean")}>Ocean</button>;
}

중요한 유형 및 경계

OriaThemeProviderProps는 OriaThemeConfig 또는 외부 OriaThemeRuntime을 허용합니다. 클라이언트에만 공급자를 마운트합니다. 다음 첫 번째 페인트의 경우 검증된 기본 변수와 Bootstrap 스크립트를 먼저 출력합니다.