# useEyedropper


```tsx
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

<Signature name="useEyedropper" />

<Callout variant="warning" title="Not everywhere">
  This wraps the browser's `EyeDropper` API, which today means Chromium. Always
  check `supported` before rendering your own trigger.
</Callout>

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](/react/handbook/browser-support).