useEyeDropper

Use EyeDropper API to pick color

Usage

Live Editor

function Demo() {
  const [color, setColor] = useState("");
  const [supported, open] = useEyeDropper();

  if (supported) {
    return (
      <div style={{ padding: 40 }}>
        Supported: {supported.toString()}
        <br />
        Color: {color}
        <button
          type="button"
          onClick={async () => setColor((await open()).sRGBHex)}
        >
          Pick color
        </button>
      </div>
    );
  }

  return <span>Not Supported by Your Browser</span>;
};

Result

Loading...

API

useEyeDropper

Returns

readonly [boolean, (options?: UseEyeDropperOpenOptions | undefined) => Promise<UseEyeDropperOpenReturnType>]: A tuple with the following elements:

• Whether the browser supports this feature.
• A function to open eye dropper.

Arguments

UseEyeDropperOpenOptions

Property	Description	Type	DefaultValue
signal	abort signal	AbortSignal	-

UseEyeDropperOpenReturnType

Property	Description	Type	DefaultValue
sRGBHex	rgb color value	string (Required)	-