useEyedropper

import { useEyedropper } from "chroma-panel";
 
function PickFromScreen() {
  const { supported, pick } = useEyedropper();
 
  if (!supported) {
    return null;
  }
 
  return <button onClick={() => pick().then(setColor)}>Pick</button>;
}

API reference

function useEyedropper(): Eyedropper

Wraps the browser's EyeDropper API. Returns supported: false where the API does not exist — check it before rendering a trigger.

Not everywhere

This wraps the browser's EyeDropper API, which today means Chromium. Always check supported before rendering your own trigger.

The panel's own eyedropper button does this check for you: showEyedropper defaults to true, but the button only renders where the API exists. See browser support.