color-kitnext

@pbroom/color-kit/reactColor

useMultiColor

Manages a named collection of colors that share one display gamut and view model, plus a selected entry.

functionimport { useMultiColor } from '@pbroom/color-kit/react';use-multi-color.ts:167
function useMultiColor(
  options?: UseMultiColorOptions,
): UseMultiColorReturn;

Each entry is a full requested/displayed ColorState, as in useColor. Works uncontrolled (defaultColors) or controlled (state + onChange); operations always build on the latest state, so several calls in one event handler compose.

Parameters

options?UseMultiColorOptionsdefault {}
Initial or controlled collection and the change callback.

Returns

UseMultiColorReturnThe collection state and operations.

Example

TSX
import { useMultiColor } from '@pbroom/color-kit/react';

function Palette() {
  const palette = useMultiColor({
    defaultColors: { background: '#ffffff', text: '#1f2937' },
  });
  palette.ids; // → ['background', 'text']
  palette.selectedId; // → 'background'

  return (
    <button onClick={() => palette.addColor('accent', '#3b82f6')}>
      Add accent
    </button>
  );
}