跳到主要内容

useEyeDropper

使用 EyeDropper API 来选择颜色。

Usage​

实时编辑器

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>;
};
结果
Loading...

API​

useEyeDropper​

Returns​

readonly [boolean, (options?: UseEyeDropperOpenOptions | undefined) => Promise<UseEyeDropperOpenReturnType>]: 包含以下元素的元组：

  • 浏览器是否支持该特性。
  • 打开颜色选择器的函数。

Arguments​

UseEyeDropperOpenOptions​

参数名描述类型默认值
signal终止信号AbortSignal-

UseEyeDropperOpenReturnType​

参数名描述类型默认值
sRGBHexrgb 颜色值string (必填)-