alpha

useHexColorFieldState

install	`yarn add @react-stately/color`
version	3.0.0-alpha.1
usage	`import {useHexColorFieldState} from '@react-stately/color'`

API#

useHexColorFieldState(
  (props: HexColorFieldProps
)): HexColorFieldState

Name	Type	Description
`colorValue`	`Color`
`setInputValue`	`( (value: string )) => void`
`inputValue`	`string`	The current text value of the input. Updated as the user types, and formatted according to `formatOptions` on blur.

Method	Description
`commit(): void`	Commits the current input value. The value is parsed to a number, clamped according to the minimum and maximum values of the field, and snapped to the nearest step value. This will fire the `onChange` prop with the new value, and if uncontrolled, update the `numberValue`. 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 `maxValue` if any, and fires `onChange`.
`decrementToMin(): void`	Sets the current value to the `minValue` if any, and fires `onChange`.

See the docs for useHexColorField in react-aria for an example of useHexColorFieldState.

Name	Type	Description
`value`	`ColorInput`
`defaultValue`	`ColorInput`
`onChange`	`( (color: Color )) => void`
`step`	`number`
`isDisabled`	`boolean`	Whether the input is disabled.
`isReadOnly`	`boolean`	Whether the input can be selected but not changed by the user.
`validationState`	`ValidationState`	Whether the input should display its "valid" or "invalid" visual styling.
`isRequired`	`boolean`	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`autoFocus`	`boolean`	Whether the element should receive focus on render.
`onFocus`	`( (e: FocusEvent )) => void`	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent )) => void`	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	Handler that is called when a key is released.
`placeholder`	`string`	Temporary text that occupies the text input when it is empty.
`label`	`ReactNode`	The content to display as the label.

string | Color

Method	Description
`toFormat( (format: ColorFormat )): Color`
`toHexInt(): number`
`getChannelValue( (channel: ColorChannel )): number`
`withChannelValue( (channel: ColorChannel, , value: number )): Color`

A list of supported color formats.

'hex'
  | 'hexa'
  | 'rgb'
  | 'rgba'
  | 'hsl'
  | 'hsla'
  | 'hsb'
  | 'hsba'

A list of color channels.

'hue'
  | 'saturation'
  | 'brightness'
  | 'lightness'
  | 'red'
  | 'green'
  | 'blue'
  | 'alpha'

'valid' | 'invalid'

BaseEvent<ReactKeyboardEvent<any>>

T & {stopPropagation: () => void,
continuePropagation: () => void
}

Name	Type	Description
`colorValue`	`Color`
`setInputValue`	`( (value: string )) => void`
`inputValue`	`string`	The current text value of the input. Updated as the user types, and formatted according to `formatOptions` on blur.

Method	Description
`commit(): void`	Commits the current input value. The value is parsed to a number, clamped according to the minimum and maximum values of the field, and snapped to the nearest step value. This will fire the `onChange` prop with the new value, and if uncontrolled, update the `numberValue`. 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 `maxValue` if any, and fires `onChange`.
`decrementToMin(): void`	Sets the current value to the `minValue` if any, and fires `onChange`.