useEyeDropper

Use EyeDropper API to pick color

useEyeDropper provides access to the EyeDropper API, which lets users sample colors from any pixel on their screen. It returns a tuple of a boolean indicating browser support and an open function that launches the native color picker. The open function returns a promise resolving to an object with the selected color in sRGBHex format.

When to Use

• Building color picker tools that let users sample colors from anywhere on screen
• Creating design or theming tools where users need to match existing colors
• Implementing accessibility contrast checkers that sample page colors

Notes

• SSR-safe: Returns false for support and a no-op function during server-side rendering. No window or EyeDropper access occurs on the server.
• Browser support: The EyeDropper API is currently only supported in Chromium-based browsers. Always check the first tuple element (isSupported) before offering the feature.
• User activation: The open function requires a user gesture (e.g., button click) to launch the picker. You can pass an AbortSignal to cancel the operation.

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>;
};

API

useEyeDropper

Returns

readonly [boolean, (options?: UseEyeDropperOpenOptions | undefined) => Promise<UseEyeDropperOpenReturnType>]: A tuple with the following elements:

• Whether the browser supports this feature.
• A function to open eye dropper.

Arguments

UseEyeDropperOpenOptions

UseEyeDropperOpenReturnType