useEyeDropper

使用 EyeDropper API 來選擇顏色。

Usage

即時編輯器

function Demo() {
  const [color, setColor] = useState("");
  const [supported, open] = useEyeDropper();

  if (supported) {
    return (
      <div style={{ padding: 40 }}>
        支持狀態：{supported.toString()}
        <br />
        顏色：{color}
        <button
          type="button"
          onClick={async () => setColor((await open()).sRGBHex)}
        >
          選擇顏色
        </button>
      </div>
    );
  }

  return <span>您的瀏覽器不支持此功能</span>;
};

結果

支持狀態：true
顏色：

API

useEyeDropper

Returns

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

• 瀏覽器是否支援該特性。
• 打開顏色選擇器的函數。

Arguments

UseEyeDropperOpenOptions

參數名	描述	類型	預設值
signal	终止信号	AbortSignal	-

UseEyeDropperOpenReturnType

參數名	描述	類型	預設值
sRGBHex	rgb 颜色值	string (必填)	-