# useColorStore


```ts
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

<Signature name="createColorStore" />

| 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

<SignatureList names="useColorValue, useTransientColor, usePanel" />

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

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

## Building a control of your own

<SignatureList names="usePointerDrag, useAxisKeyboard" />

## Driving several panels

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

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