React 取色器 hook

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

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

API 参考

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 中，它会替你完成这项检查：showEyedropper 默认为 true，但只有在支持该 API 的浏览器里，按钮才会渲染出来。详见浏览器支持。