Usage
import { ColorWheel, ColorWheelProps, ColorWheelValue, WHEEL_CENTER_X, WHEEL_CENTER_Y } from "@desk/ui/components/color-wheel";Best practices
ColorWheelis fully controlled — own theColorWheelValue({h,s,l}) and set it fromonChange; it stores nothing internally, so dropping the update freezes the picker.Values are HSL (
h0–360,s/l0–100), not hex — convert at your storage boundary; a hex string won't position the handles.onChangefires on every pointer drag and arrow-key step — throttle persistence/network writes downstream rather than reacting to each intermediate value.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange | (value: ColorWheelValue) => void | Fired on every pointer drag of the pad or hue arc with the updated HSL value. | |
| value | ColorWheelValue | Current HSL selection; the picker is fully controlled and keeps no internal state. |
Also exports
- interface
ColorWheelProps - interface
ColorWheelValue - const
WHEEL_CENTER_X - const
WHEEL_CENTER_Y