OriaTheme
GitHub

アプリケーション開発者向け

React および Next.js

プロバイダーとフックを使用して 1 つのランタイムをサブスクライブします。次に、デフォルトの CSS と Bootstrap を最初のペイント HTML に配置します。

プロバイダーを 1 つマウントする

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>
  );
}

スナップショットを読み取り、フックを使用して設定を変更する

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 スクリプトをサーバー コンポーネント ヘッドに出力し、プロバイダーをクライアント コンポーネントに配置します。 Dynamic(..., { ssr: false }) を使用して閉じたローカル ThemeEditor をロードし、ユーザーが開いた後にのみレンダリングします。

続行: Vue の統合