alpha

useColorField

Provides the behavior and accessibility implementation for a color field component. Color fields allow users to enter and adjust a hex color value.

installyarn add @react-aria/color
version3.0.0-alpha.0
usageimport {useColorField} from '@react-aria/color'
View ARIA spec
W3C
View repository
GitHub
View package
NPM

API#

useColorField( props: AriaColorFieldProps, state: ColorFieldState, ref: RefObject<HTMLInputElement> ): ColorFieldAria

Example#

import {useColorFieldState} from '@react-stately/color';

function ColorField(props) {
  let state = useColorFieldState(props);
  let inputRef = React.useRef();
  let {labelProps, inputProps} = useColorField(props, state, inputRef);

  return (
    <div style={{display: 'inline-flex', flexDirection: 'column'}}>
      <label {...labelProps}>{props.label}</label>
      <input {...inputProps} ref={inputRef} />
    </div>
  );
}

<ColorField label="Color" />
import {useColorFieldState} from '@react-stately/color';

function ColorField(props) {
  let state = useColorFieldState(props);
  let inputRef = React.useRef();
  let {labelProps, inputProps} = useColorField(
    props,
    state,
    inputRef
  );

  return (
    <div
      style={{
        display: 'inline-flex',
        flexDirection: 'column'
      }}>
      <label {...labelProps}>{props.label}</label>
      <input {...inputProps} ref={inputRef} />
    </div>
  );
}

<ColorField label="Color" />
import {useColorFieldState} from '@react-stately/color';

function ColorField(
  props
) {
  let state = useColorFieldState(
    props
  );
  let inputRef = React.useRef();
  let {
    labelProps,
    inputProps
  } = useColorField(
    props,
    state,
    inputRef
  );

  return (
    <div
      style={{
        display:
          'inline-flex',
        flexDirection:
          'column'
      }}>
      <label
        {...labelProps}>
        {props.label}
      </label>
      <input
        {...inputProps}
        ref={inputRef}
      />
    </div>
  );
}

<ColorField label="Color" />