애플리케이션 개발자용

React 및 Next.js

공급자와 후크를 사용하여 하나의 런타임을 구독합니다. 다음으로 기본 CSS 및 Bootstrap를 첫 번째 페인트 HTML에 넣습니다.

하나의 공급자 마운트

tsx

import { OriaThemeProvider } from "@oriatheme/react";
import { oriaPresetThemes } from "@oriatheme/presets";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OriaThemeProvider config={{
      presets: oriaPresetThemes,
      defaultThemeId: "oria-default",
    }}>
      {children}
    </OriaThemeProvider>
  );
}

Hooks를 사용하여 스냅샷을 읽고 환경설정을 변경하세요.

tsx

import { useOriaTheme, useThemeSnapshot } from "@oriatheme/react";

export function ThemeControls() {
  const { setAppearance, setTheme } = useOriaTheme();
  const activeId = useThemeSnapshot((snapshot) => snapshot.preference.activeThemeId);

  return <button onClick={() => setTheme(activeId === "oria-ocean" ? "oria-default" : "oria-ocean")}>
    Switch theme
  </button>;
}

useThemeSnapshot은 안정적인 슬라이스를 구독하기 위한 것입니다. 런타임을 다시 생성하거나 해당 상태를 구성 요소 내부에 복사하지 마세요.

Next.js: 최초의 페인트 및 주문형 편집기

신뢰할 수 있는 기본 CSS 및 Bootstrap 스크립트를 서버 구성 요소 헤드에 출력한 다음 공급자를 클라이언트 구성 요소에 배치합니다. 동적(..., { ssr: false })을 사용하여 닫힌 로컬 ThemeEditor를 로드하고 사용자가 연 후에만 렌더링합니다.

계속: Vue 통합