beta

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.

install	`yarn add @react-stately/color`
version	3.0.0-beta.1
usage	`import {useColorSliderState} from '@react-stately/color'`

API#

useColorWheelState(
  (props: ColorWheelProps
)): ColorWheelState

Name	Type	Description
`value`	`Color`	The current color value represented by the color wheel.
`hue`	`number`	The current value of the hue channel displayed by the color wheel.
`isDragging`	`boolean`	Whether the color wheel is currently being dragged.

Method	Description
`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( (minStepSize: number )): void`	Increments the hue by the given amount (defaults to 1).
`decrement( (minStepSize: 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`.

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

Name	Type	Default	Description
`isDisabled`	`boolean`	—	Whether the ColorWheel is disabled.
`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.
`step`	`number`	`1`	The ColorWheel's step value.
`defaultValue`	`string \| Color`	`'hsl(0, 100%, 50%)'`	The default value (uncontrolled).
`value`	`string \| Color`	—	The current value (controlled).

Represents a color value.

Method	Description
`toFormat( (format: ColorFormat )): Color`	Converts the color to the given color format, and returns a new Color object.
`toHexInt(): number`	Converts the color to hex, and returns an integer representation.
`getChannelValue( (channel: ColorChannel )): number`	Returns the numeric value for a given channel. Throws an error if the channel is unsupported in the current color format.
`withChannelValue( (channel: ColorChannel, , value: number )): Color`	Sets the numeric value for a given channel, and returns a new Color object. Throws an error if the channel is unsupported in the current color format.
`getChannelRange( (channel: ColorChannel )): ColorChannelRange`	Returns the minimum, maximum, and step values for a given channel.
`getChannelName( (channel: ColorChannel, , locale: string )): string`	Returns a localized color channel name for a given channel and locale, for use in visual or accessibility labels.
`formatChannelValue( (channel: ColorChannel, , locale: string )): string`	Formats the numeric value for a given channel for display according to the provided locale.

A list of supported color formats.

'hex'
  | 'hexa'
  | 'rgb'
  | 'rgba'
  | 'hsl'
  | 'hsla'
  | 'hsb'
  | 'hsba'

A list of color channels.

'hue'
  | 'saturation'
  | 'brightness'
  | 'lightness'
  | 'red'
  | 'green'
  | 'blue'
  | 'alpha'

Name	Type	Description
`minValue`	`number`	The minimum value of the color channel.
`maxValue`	`number`	The maximum value of the color channel.
`step`	`number`	The step value of the color channel, used when incrementing and decrementing.

Name	Type	Description
`value`	`Color`	The current color value represented by the color wheel.
`hue`	`number`	The current value of the hue channel displayed by the color wheel.
`isDragging`	`boolean`	Whether the color wheel is currently being dragged.

Method	Description
`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( (minStepSize: number )): void`	Increments the hue by the given amount (defaults to 1).
`decrement( (minStepSize: 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`.