# useEyedropper

> useEyedropper 是一个 React 取色器 hook，可以从屏幕上任意位置取色，并告诉你当前浏览器是否支持这项功能。

Source: https://chroma-panel.jscrate.dev/zh/react/utils/use-eyedropper
Last updated: 2026-09-21

`useEyedropper` 会打开浏览器的屏幕取色器。显示按钮之前，先检查 `supported`。`pick()` 返回 hex 字符串；如果用户取消了操作或 API 不可用，则返回 `null`。

```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 参考

```ts
function useEyedropper(): Eyedropper
```

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

> **并非所有浏览器都支持**
>
> 它封装的是浏览器的 `EyeDropper` API，目前只有 Chromium
> 内核的浏览器支持。渲染你自己的触发器之前，一定要先检查 `supported`。

面板自带的取色按钮位于 [PanelFooter](https://chroma-panel.jscrate.dev/zh/react/components/panel-footer) 中，它会替你完成这项检查：`showEyedropper` 默认为 `true`，但只有在支持该 API 的浏览器里，按钮才会渲染出来。详见[浏览器支持](https://chroma-panel.jscrate.dev/zh/react/handbook/browser-support)。