Vize
use-eye-dropper
Pick a color from anywhere on screen with the EyeDropper API.
| Package | @vizejs/composable/use-eye-dropper |
| Own the source | vize lib pull composable:use-eye-dropper |
| Runtime exports | useEyeDropper |
| Gzip budget | 1280 B |
Usage
import { useEyeDropper } from "@vizejs/composable/use-eye-dropper";
Runtime contract
| Utility | Category | Stability | SSR | Hydration | Cleanup | Targets | Host globals | Uses |
|---|---|---|---|---|---|---|---|---|
useEyeDropper |
system | experimental | deterministic-fallback | caller-managed | none | web, desktop | window |
— |
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.
| Member | Type | Description |
|---|---|---|
sRGBHex |
string |
Picked color as a #rrggbb string. |
EyeDropperLike
Minimal EyeDropper instance.
| Member | Type | Description |
|---|---|---|
open |
(options?: { signal?: AbortSignal }) => Promise<EyeDropperColor> |
Open the picker. Rejects with AbortError when dismissed or aborted. |
UseEyeDropperOptions
Options for useEyeDropper.
| Member | Type | Description |
|---|---|---|
host? |
MaybeRef<EyeDropperHost | null | undefined> |
EyeDropper constructor for alternate runtimes and tests. A ref (not a getter) because the host itself is a constructor function. |
initialValue? |
string |
Initial sRGBHex value. |
EyeDropperControls
Reactive state and actions returned by useEyeDropper.
| Member | Type | Description |
|---|---|---|
supported |
ComputedRef<boolean> |
Whether the EyeDropper API is available. |
sRGBHex |
Readonly<Ref<string>> |
Most recently picked color. |
picking |
Readonly<Ref<boolean>> |
Whether the picker is open. |
open |
(signal?: AbortSignal) => Promise<EyeDropperResult> |
Open the picker. Browsers require a user gesture. |