useColorStore

import { createColorStore } from "chroma-panel/core";
 
const store = createColorStore({ h: 220, s: 75, v: 80, a: 1 });

chroma-panel/core has no React and no DOM, so the store can live in code that runs anywhere.

API reference

function createColorStore(initial: Hsva): ColorStore

Creates the store the panel is built on. It holds the full Hsva and notifies subscribers, so a drag never re-renders React.

Method	Does
`get()`	Current `Hsva`
`set(next)`	Replace the colour
`patch(partial)`	Change some channels
`ingest(next)`	Merge, keeping hue and saturation
`commit()`	Mark the end of a gesture
`subscribe(fn)`	Every change. Returns an unsubscribe function
`subscribeCommit(fn)`	Only on commit
`getSnapshot()` / `getServerSnapshot()`	For `useSyncExternalStore`

subscribe fires on every frame of a drag. subscribeCommit fires once when the gesture ends. That split is what onChange and onChangeComplete are built on.

Reading it in React

function useColorValue(store: ColorStore): Hsva

Subscribes to a store and returns the colour as ordinary state. Re-renders on every change, so use it where a re-render per frame is acceptable.

function useTransientColor(store: ColorStore, effect: (color: Hsva) => void): void

Runs an effect on every colour change without re-rendering. This is how the panel stays smooth: it writes to the DOM directly.

function usePanel(): PanelContextValue

Reaches the surrounding panel's store, ids and options. Only valid inside a ChromaPanel, which is what a custom mode's Panel renders within.

useTransientColor is how the panel stays smooth. It writes to the DOM directly instead of setting state:

useTransientColor(store, (c) => {
  el.current.style.background = toHex(c);
});

Building a control of your own

function usePointerDrag(options: UsePointerDragOptions): PointerDragProps

The pointer-tracking behind the wheel and the sliders, for building a drag surface of your own. Keeps tracking when the pointer leaves the element.

function useAxisKeyboard(options: UseAxisKeyboardOptions): AxisKeyboardProps

Adds arrow, Page Up/Down and Home/End handling to one axis, matching the built-in controls.

Driving several panels

Pass a store to ColorInput or ChromaPanel with the store prop to drive several components from one value.

<ChromaPanel store={store} />
<ColorInput store={store} />