useEyeDropper

See: EyeDropper API.

Demo

INFO

The component uses useEyeDropper hook to know if EyeDropper API is supported and returns a button to get a color with EyeDropper API.

Loading demo…

Show source code

import { useState } from "react"
import { useEyeDropper } from "../../../.."

export const UseEyeDropper = () => {
	const [color, setColor] = useState("");
	const { isSupported, open } = useEyeDropper();

	const onClick = async () => {
		const result = await open();
		result && setColor(result);
	};

	return <div style={{ textAlign: "center" }}>
		<p>Is supported: {isSupported.toString()}</p>
		<button onClick={onClick}>Get Color</button>
		<br />
		<br />
		<label>Color </label><input type="color" value={color} readOnly/>
	</div>
}

Types

UseEyeDropperProps

Optional callbacks for useEyeDropper.

Property	Type	Required	Description
onStart	() => void		Called immediately when open() is invoked, before the picker appears.
onFinish	(result: '#${string}') => void		Called with the selected hex colour string once the user picks a colour.

UseEyeDropperResult

Result object returned by useEyeDropper.

Property	Type	Required	Description
isSupported	boolean	✓	true when the EyeDropper API is available in the current browser.
open	(signal?: AbortSignal) => Promise<'#${string}'> \| Promise<void>	✓	Opens the colour picker UI. Resolves with the selected hex colour string.