ColorArea

A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

Theme

colorSpace

xChannel

yChannel

isDisabled

Example

ColorArea.tsx

ColorArea.css

Example

ColorArea.tsx

ColorArea.css

import {ColorArea} from './ColorArea';

<ColorArea
  defaultValue="hsl(0, 100%, 50%)" />

Value

Use the value or defaultValue prop to set the color value, and the xChannel and yChannel props to specify which color channels to display. The value may be a string or Color object, parsed using the parseColor function.

The onChange event is called as the user drags, and onChangeEnd is called when the thumb is released. These are always called with a Color object.

onChange value: #9B80FF
onChangeEnd value: #9B80FF

import {parseColor} from 'react-aria-components';
import {ColorArea} from './ColorArea';
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState(parseColor('#9B80FF'));
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <ColorArea
        xChannel="red"
        yChannel="green"
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
      <pre style={{fontSize: 12}}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}

API

<ColorArea>
  <ColorThumb />
</ColorArea>

ColorArea

A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

Name	Type
`xName`	`string`
The name of the x channel input element, used when submitting an HTML form. See MDN.
`yName`	`string`
The name of the y channel input element, used when submitting an HTML form. See MDN.
`colorSpace`	`ColorSpace`
The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space. If not provided, this defaults to the color space of the `color` or `defaultColor` value.
`xChannel`	`ColorChannel`
Color channel for the horizontal axis.
`yChannel`	`ColorChannel`
Color channel for the vertical axis.
`isDisabled`	`boolean`
Whether the ColorArea is disabled.
`children`	`ChildrenOrFunction<ColorAreaRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

`value`	`T`
The current value (controlled).
`defaultValue`	`T`
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.

Default className: react-aria-ColorArea

Render Prop	CSS Selector
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the color area is disabled.
`state`	CSS Selector: `—`
State of the color area.

ColorThumb

A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.

Name	Type
`children`	`ChildrenOrFunction<ColorThumbRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-ColorThumb

Render Prop	CSS Selector
`color`	CSS Selector: `—`
The selected color, excluding the alpha channel.
`isDragging`	CSS Selector: `[data-dragging]`
Whether this thumb is currently being dragged.
`isHovered`	CSS Selector: `[data-hovered]`
Whether the thumb is currently hovered with a mouse.
`isFocused`	CSS Selector: `[data-focused]`
Whether the thumb is currently focused.
`isFocusVisible`	CSS Selector: `[data-focus-visible]`
Whether the thumb is keyboard focused.
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the thumb is disabled.

useColorArea

ColorArea

Value

API

ColorArea

ColorThumb

Related pages