Guide
Reference
Roadmap
Guide
Reference
Roadmap

useEyeDropper

Tags:
Browser
isSupported

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.

🪝 Hook🎨 Demo📄 Document

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> }