useColorFieldState

Provides state management for a color field component. Color fields allow users to enter and adjust a hex color value.

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

API#


useColorFieldState( (props: ColorFieldProps )): ColorFieldState

Interface#


Properties

NameTypeDescription
inputValuestring

The current text value of the input. Updated as the user types, and formatted according to formatOptions on blur.

colorValueColor

The currently parsed color value, or null if the field is empty. Updated based on the inputValue as the user types.

Methods

MethodDescription
setInputValue( (value: string )): voidSets the current text value of the input.
commit(): void

Updates the input value based on the currently parsed color value. Typically this is called when the field is blurred.

increment(): voidIncrements the current input value to the next step boundary, and fires onChange.
decrement(): voidDecrements the current input value to the next step boundary, and fires onChange.
incrementToMax(): voidSets the current value to the maximum color value, and fires onChange.
decrementToMin(): voidSets the current value to the minimum color value, and fires onChange.
validate( (value: string )): boolean

Validates a user input string. Values can be partially entered, and may be valid even if they cannot currently be parsed to a color. Can be used to implement validation as a user types.

Example#


See the docs for useColorField in react-aria for an example of useColorFieldState.