use-eye-dropper

Pick a color from anywhere on screen with the EyeDropper API.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useEyeDropper } from "@vizejs/composable/use-eye-dropper";

Try it

Pick a color from the screen

Let the reader sample a color from anywhere on the screen.

Open the interactive example

What to observe: Pick a color opens the eye dropper in Chromium on desktop; the brand color updates to the sampled hex value.

open() must run from a user gesture and can be cancelled with an AbortSignal. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { useEyeDropper } from "@vizejs/composable/use-eye-dropper";
import { useMounted } from "@vizejs/composable/use-mounted";

const mounted = useMounted();
const { supported, sRGBHex, open } = useEyeDropper({ initialValue: "#42b883" });
</script>

<template>
  <div class="composable-example">
    <p>Pick a brand color from anywhere on the screen.</p>
    <button type="button" :disabled="!mounted || !supported" @click="() => open()">
      Pick a color
    </button>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : supported
          ? `Brand color: ${sRGBHex}`
          : "The EyeDropper API is not available; type a hex value instead."
    }}</output>
  </div>
</template>

Runtime contract

API

useEyeDropper

Pick a color from anywhere on screen with the EyeDropper API. open resolves to a discriminated EyeDropperResult; dismissing the picker (Escape) or aborting via signal yields "cancelled". The composable holds no resources beyond an open picker, which the caller controls through signal. Server rendering: supported is false and sRGBHex is initialValue.

function useEyeDropper(options: UseEyeDropperOptions = {}): EyeDropperControls

const { open, sRGBHex, supported } = useEyeDropper();

Types

EyeDropperColor

Color picked by the EyeDropper API.

EyeDropperLike

Minimal EyeDropper instance.

UseEyeDropperOptions

Options for useEyeDropper.

EyeDropperControls

Reactive state and actions returned by useEyeDropper.