useColorAreaState

Provides state management for a color area component. Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.

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

API#


useColorAreaState( (props: ColorAreaProps )): ColorAreaState

Interface#


Properties

NameTypeDescription
valueColorThe current color value displayed by the color area.
xValuenumberThe current value of the horizontal axis channel displayed by the color area.
yValuenumberThe current value of the vertical axis channel displayed by the color area.
isDraggingbooleanWhether the color area is currently being dragged.
channels{
xChannel: ColorChannel,
yChannel: ColorChannel,
zChannel: ColorChannel
}
Returns the xChannel, yChannel and zChannel names based on the color value.
xChannelStepnumberThe step value of the xChannel, used when incrementing and decrementing.
yChannelStepnumberThe step value of the yChannel, used when incrementing and decrementing.
xChannelPageStepnumberThe page step value of the xChannel, used when incrementing and decrementing.
yChannelPageStepnumberThe page step value of the yChannel, used when incrementing and decrementing.

Methods

MethodDescription
setValue( (value: stringColor )): voidSets the current color value. If a string is passed, it will be parsed to a Color.
setXValue( (value: number )): voidSets the value for the horizontal axis channel displayed by the color area, and triggers onChange.
setYValue( (value: number )): voidSets the value for the vertical axis channel displayed by the color area, and triggers onChange.
setColorFromPoint( (x: number, , y: number )): voidSets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers onChange.
getThumbPosition(): {
x: number,
}
Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage.
incrementX( (stepSize?: number )): voidIncrements the value of the horizontal axis channel by the channel step or page amount.
decrementX( (stepSize?: number )): voidDecrements the value of the horizontal axis channel by the channel step or page amount.
incrementY( (stepSize?: number )): voidIncrements the value of the vertical axis channel by the channel step or page amount.
decrementY( (stepSize?: number )): voidDecrements the value of the vertical axis channel by the channel step or page amount.
setDragging( (value: boolean )): voidSets whether the color area is being dragged.
getDisplayColor(): ColorReturns the color that should be displayed in the color area thumb instead of value.

Example#


See the docs for useColorArea in react-aria for an example of useColorAreaState.