beta

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/color
version3.0.0-beta.5
usageimport {useColorFieldState} from '@react-stately/color'

API#


useColorFieldState( (props: ColorFieldProps )): ColorFieldState

Interface#


Properties

NameTypeDescription
inputValuestringThe current text value of the input. Updated as the user types, and formatted according to formatOptions on blur.
colorValueColorThe 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(): voidUpdates 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 )): booleanValidates 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.