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.33.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.

colorValueColornull

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

realtimeValidationValidationResultRealtime validation results, updated as the user edits the value.
displayValidationValidationResultCurrently displayed validation results, updated when the user commits their changes.

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.

updateValidation( (result: ValidationResult )): voidUpdates the current validation result. Not displayed to the user until commitValidation is called.
resetValidation(): voidResets the displayed validation state to valid when the user resets the form.
commitValidation(): voidCommits the realtime validation so it is displayed to the user.

Example#


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