useColorFieldState
Provides state management for a color field component. Color fields allow users to enter and adjust a hex color value.
install | yarn add react-stately |
---|---|
version | 3.33.0 |
usage | import {useColorFieldState} from 'react-stately' |
API#
useColorFieldState(
(props: ColorFieldProps
)): ColorFieldState
Interface#
Properties
Name | Type | Description |
inputValue | string | The current text value of the input. Updated as the user types,
and formatted according to |
colorValue | Color | null | The currently parsed color value, or null if the field is empty.
Updated based on the |
realtimeValidation | ValidationResult | Realtime validation results, updated as the user edits the value. |
displayValidation | ValidationResult | Currently displayed validation results, updated when the user commits their changes. |
Methods
Method | Description |
setInputValue(
(value: string
)): void | Sets 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(): void | Increments the current input value to the next step boundary, and fires onChange . |
decrement(): void | Decrements the current input value to the next step boundary, and fires onChange . |
incrementToMax(): void | Sets the current value to the maximum color value, and fires onChange . |
decrementToMin(): void | Sets 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
)): void | Updates the current validation result. Not displayed to the user until commitValidation is called. |
resetValidation(): void | Resets the displayed validation state to valid when the user resets the form. |
commitValidation(): void | Commits the realtime validation so it is displayed to the user. |
Example#
See the docs for useColorField in react-aria for an example of useColorFieldState
.