createEyeDropper
Category Browser
Provides a mechanism for creating an eye dropper tool.
Using this tool, users can sample colors from their screens, including outside of the browser window.
Demo
Your browser doesn't support the Eye Dropper API :(
Usage
<script>
import { createEyeDropper } from '@sv-use/core';
const eyeDropper = createEyeDropper();
</script>Type definitions
import { type ConfigurableWindow } from '../../__internal__/configurable.js';
type SRGBHex = `#${string}`;
interface EyeDropperOpenOptions {
/** @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal */
signal?: AbortSignal;
}
export interface EyeDropper {
new (): EyeDropper;
open: (options?: EyeDropperOpenOptions) => Promise<{
sRGBHex: SRGBHex;
}>;
[Symbol.toStringTag]: 'EyeDropper';
}
interface CreateEyeDropperOptions extends ConfigurableWindow {
/**
* Initial sRGBHex value of the eye dropper.
* @default undefined
*/
initialValue?: SRGBHex;
}
type CreateEyeDropperReturn = {
/** Whether the {@link https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API | `Eye Dropper API`} is supported or not. */
readonly isSupported: boolean;
/** The current value selected in the eye dropper tool. */
readonly current: SRGBHex | undefined;
/** A callback to open the eye dropper tool. */
open: (options?: EyeDropperOpenOptions) => Promise<{
sRGBHex: SRGBHex;
} | undefined>;
};
/**
* Provides a mechanism for creating an eye dropper tool.
* @see https://svelte-librarian.github.io/sv-use/docs/core/browser/create-eye-dropper
*/
export declare function createEyeDropper(options?: CreateEyeDropperOptions): CreateEyeDropperReturn;
export {};