Custom modes

Registering

import { registerMode, ChromaPanel } from "chroma-panel";
 
registerMode({
  id: "brand",
  label: "Brand colors",
  icon: BrandIcon,
  Panel: BrandPanel, // reads the color with usePanel()
});
 
<ChromaPanel modes={["wheel", "brand"]} />;

Inside BrandPanel, reach the colour with usePanel(), and use the panel's own controls — ColorArea, Swatch and the rest.

Passing props into a mode

modeProps is keyed by mode id, and each entry is spread onto that mode's panel component. It exists so a custom mode can take props without the panel needing to know about it:

<ChromaPanel modeProps={{ brand: { team: "design" } }} />

API reference

function registerMode(mode: PickerMode): void

Adds a mode so it can be named in the modes prop. A mode is plain data, so registering one changes no existing file.

function getMode(id: string): PickerMode | undefined

Looks up a registered mode by id.

function resolveModes(requested: (string | PickerMode)[]): PickerMode[]

Turns the modes prop — a mix of ids and mode objects — into the modes to render, in order.