API-Referenz · React

@oriatheme/react

Verbinden Sie einen externen Laufzeitspeicher mit einem Provider und Hooks mit React. keine zweite Zustandsmaschine.

Paket und Umgebung

Browser-Anbieter für React 18.2 oder 19; Das Modul selbst ist SSR-sicher zu importieren.

bash

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

bash

npm install @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

bash

yarn add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

bash

bun add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

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
`OriaThemeProvider`	`({ config, runtime?, children }: OriaThemeProviderProps) => ReactElement`	Startet eine eigene Laufzeit oder verwendet die bereitgestellte Laufzeit für Nachkommen.
`useOriaTheme`	`() => { snapshot, runtime, setTheme, setAppearance }`	Liest den vollständigen unveränderlichen Laufzeit-Snapshot und die gebundenen Aktionen.
`useThemeSnapshot`	`<T>(selector, isEqual?) => T`	Wählt einen Snapshot-Slice aus und behält dabei gleiche Referenzen bei.

tsx

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

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

Wichtige Typen und Grenzen

OriaThemeProviderProps akzeptiert eine OriaThemeConfig oder eine externe OriaThemeRuntime. Mounten Sie den Provider nur auf dem Client; Geben Sie für „Next first paint“ zunächst validierte Standardvariablen und ein Bootstrap-Skript aus.