TypeScript

The types you will reach for

import type {
  ColorChangeResult,
  ColorFormat,
  Hsva,
  Rgba,
  ColorPalette,
  ModeId,
  PickerMode,
} from "chroma-panel";

ColorChangeResult

What every change handler receives. Every field is always present, whatever you set format to, so you can read hex and rgba regardless.

type ColorChangeResult = {
  hex: string;
  hexa: string;
  rgb: Rgb;
  rgba: Rgba;
  hsl: Hsl;
  hsla: Hsla;
  hsva: Hsva;
  css: string;
};

css is the string in whichever format you chose, and the value a form submits.

Typing a handler

import { ColorInput, type ColorChangeResult } from "chroma-panel";
 
function handleChange(result: ColorChangeResult): void {
  console.log(result.hex, result.hsva);
}
 
<ColorInput onChange={handleChange} />;

Prop types

Both component prop interfaces are exported, so you can extend them:

import type { ChromaPanelProps, ColorInputProps } from "chroma-panel";
 
type BrandPickerProps = ColorInputProps & { label: string };

ColorInputProps extends ChromaPanelProps, so everything the panel takes, the input takes too.