useEyeDropper

Hook that gives you access to the eye dropper

browser

test coverage

Last changed: last month

TIP

This hook uses EyeDropper browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

import { useEyeDropper } from '@siberiacancode/reactuse';

Usage

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

Demo

source

Api

Parameters

Name	Type	Default	Note
initialValue?	string	undefined	The initial value for the eye dropper

Returns

UseEyeDropperReturn

Type declaration

export interface ColorSelectionOptions {
  signal?: AbortSignal;
}

export interface ColorSelectionResult {
  sRGBHex: string;
}

export interface EyeDropper {
  open: (options?: ColorSelectionOptions) => Promise<ColorSelectionResult>;
}

export interface EyeDropperConstructor {
  new (): EyeDropper;
}

interface Window {
    readonly EyeDropper?: EyeDropperConstructor | undefined;
  }

export interface UseEyeDropperReturn {
  /** The eye dropper supported status */
  supported: boolean;
  /** The eye dropper value */
  value?: string;
  /** The eye dropper open method */
  open: (colorSelectionOptions?: ColorSelectionOptions) => Promise<ColorSelectionResult>;
}

Source

Source • Demo

Contributors

D

debabin