useColorWheelState

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

installyarn add react-stately
version3.17.0
usageimport {useColorSliderState} from 'react-stately'

API#


useColorWheelState( (props: ColorWheelProps )): ColorWheelState

Interface#


Properties

NameTypeDescription
valueColorThe current color value represented by the color wheel.
huenumberThe current value of the hue channel displayed by the color wheel.
isDraggingbooleanWhether the color wheel is currently being dragged.
stepnumberThe step value of the hue channel, used when incrementing and decrementing.
pageStepnumberThe page step value of the hue channel, used when incrementing and decrementing.

Methods

MethodDescription
setValue( (value: stringColor )): voidSets the color value represented by the color wheel, and triggers onChange.
setHue( (value: number )): voidSets the hue channel of the current color value and triggers onChange.
setHueFromPoint( x: number, y: number, radius: number ): voidSets 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,
}
Returns the coordinates of the thumb relative to the center point of the color wheel.
increment( (stepSize?: number )): voidIncrements the hue by the given amount (defaults to 1).
decrement( (stepSize?: number )): voidDecrements the hue by the given amount (defaults to 1).
setDragging( (value: boolean )): voidSets whether the color wheel is being dragged.
getDisplayColor(): ColorReturns the color that should be displayed in the color wheel instead of value.

Example#


See the docs for useColorWheel in react-aria for an example of useColorWheelState.