useColorWheel

Provides the behavior and accessibility implementation for a color wheel component. Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.

Example

ColorWheel.tsx

ColorWheel.css

ColorThumb.css

Example

ColorWheel.tsx

ColorWheel.css

ColorThumb.css

import {ColorWheel} from './ColorWheel';

<ColorWheel defaultValue="hsl(30, 100%, 50%)" />

API

<ColorWheel>
  <ColorWheelTrack />
  <ColorThumb />
</ColorWheel>

useColorWheelState(props: ColorWheelProps): ColorWheelState

useColorWheel(
  props: AriaColorWheelOptions,
state: ColorWheelState,
inputRef: RefObject<HTMLInputElement | null>
): ColorWheelAria

ColorWheelState

Properties

Name	Type
`hue`	`number`
The current value of the hue channel displayed by the color wheel.
`isDragging`	`boolean`
Whether the color wheel is currently being dragged.
`pageStep`	`number`
The page step value of the hue channel, used when incrementing and decrementing.
`isDisabled`	`boolean`
Whether the color wheel is disabled.

`value`	`Color`
The current color value represented by the color wheel.
`defaultValue`	`Color`
The default color value.

Methods

`setValue(value: string \| Color): void`
Sets the color value represented by the color wheel, and triggers `onChange`.
`setHue(value: number): void`
Sets the hue channel of the current color value and triggers `onChange`.
`setHueFromPoint( x: number, y: number, radius: number ): void`
Sets the hue channel of the current color value based on the given coordinates and radius of the color wheel, and triggers `onChange`.
`getThumbPosition(radius: number): {'x': number, 'y': number }`
Returns the coordinates of the thumb relative to the center point of the color wheel.
`increment(stepSize?: number): void`
Increments the hue by the given amount (defaults to 1).
`decrement(stepSize?: number): void`
Decrements the hue by the given amount (defaults to 1).
`setDragging(value: boolean): void`
Sets whether the color wheel is being dragged.
`getDisplayColor(): Color`
Returns the color that should be displayed in the color wheel instead of `value`.

AriaColorWheelOptions

Name	Type
`outerRadius`	`number`
The outer radius of the color wheel.
`innerRadius`	`number`
The inner radius of the color wheel.
`isDisabled`	`boolean`
Whether the ColorWheel is disabled.

`value`	`T`
The current value (controlled).
`defaultValue`	`string \| Color`
The default value (uncontrolled).
`onChange`	`(value: Color) => void`
Handler that is called when the value changes, as the user drags.
`onChangeEnd`	`(value: Color) => void`
Handler that is called when the user stops dragging.

ColorWheelAria

Name	Type
`trackProps`	`DOMAttributes`
Props for the track element.
`thumbProps`	`DOMAttributes`
Props for the thumb element.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`
Props for the visually hidden range input element.