useEyeDropper

A React Hook that allows you to use the eye dropper tool to get the color of a pixel on the screen.

Demo

Source
isSupported:
false
sRGBHex:
#33AAFF
Color Preview Here

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const { isSupported, sRGBHex, open } = useEyeDropper(options)

Options

export type UseEyeDropperOptions = {
  /**
   * Initial sRGBHex.
   *
   * @defaultValue ''
   */
  initialValue?: string
  /**
   * Whether to convert the sRGBHex to uppercase.
   *
   * @defaultValue true
   */
  upperCase?: boolean
  /**
   * Whether to keep the leading hash in the sRGBHex.
   *
   * @defaultValue true
   */
  keepLeadingHash?: boolean
}

Returns

export type UseEyeDropperReturns = {
  /**
   * Whether the EyeDropper is supported.
   */
  isSupported: boolean
  /**
   * The sRGBHex color value.
   */
  sRGBHex: string
  /**
   * Open the EyeDropper.
   *
   * @param options - The open options.
   */
  open: (options?: EyeDropperOpenOptions) => Promise<string | null>
}