alpha

useHexColorField

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

View ARIA spec

W3C

API#

useHexColorField(
  props: AriaHexColorFieldProps<AriaHexColorFieldProps, 'value'
    | 'defaultValue'
    | 'onChange'>,
  state: HexColorFieldState,
  ref: RefObject<HTMLInputElement>
): HexColorFieldAria

Features#

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.
`aria-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	Identifies the element (or elements) that provide a detailed, extended description for the object.
`excludeFromTabOrder`	`boolean`	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
`id`	`string`	The element's unique identifier. See MDN.
`autoComplete`	`string`	Describes the type of autocomplete functionality the input should provide if any. See MDN.
`maxLength`	`number`	The maximum number of characters supported by the input. See MDN.
`minLength`	`number`	The minimum number of characters required by the input. See MDN.
`name`	`string`	The name of the input element, used when submitting an HTML form. See MDN.
`pattern`	`string`	Regex pattern that the value of the input must match to be valid. See MDN.
`type`	`'text' \| 'search' \| 'url' \| 'tel' \| 'email' \| 'password' \| string`	The type of input to render. See MDN.
`inputMode`	`'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'`	Hints at the type of data that might be entered by the user while editing the element or its contents. See MDN.
`onCopy`	`ClipboardEventHandler<HTMLInputElement>`	Handler that is called when the user copies text. See MDN.
`onCut`	`ClipboardEventHandler<HTMLInputElement>`	Handler that is called when the user cuts text. See MDN.
`onPaste`	`ClipboardEventHandler<HTMLInputElement>`	Handler that is called when the user pastes text. See MDN.
`onCompositionStart`	`CompositionEventHandler<HTMLInputElement>`	Handler that is called when a text composition system starts a new text composition session. See MDN.
`onCompositionEnd`	`CompositionEventHandler<HTMLInputElement>`	Handler that is called when a text composition system completes or cancels the current text composition session. See MDN.
`onCompositionUpdate`	`CompositionEventHandler<HTMLInputElement>`	Handler that is called when a new character is received in the current text composition session. See MDN.
`onSelect`	`ReactEventHandler<HTMLInputElement>`	Handler that is called when text in the input is selected. See MDN.
`onBeforeInput`	`FormEventHandler<HTMLInputElement>`	Handler that is called when the input value is about to be modified. See MDN.
`onInput`	`FormEventHandler<HTMLInputElement>`	Handler that is called when the input value is modified. See MDN.
`aria-errormessage`	`string`	Identifies the element that provides an error message for the object.

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
}

Properties

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.

Methods

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

Name	Type	Description
`labelProps`	`LabelHTMLAttributes<HTMLLabelElement>`
`inputProps`	`HTMLAttributes<HTMLInputElement>`