@georapbox/eye-dropper-element

<eye-dropper>

A custom element that implements the EyeDropper API that allows the user to select colors from the screen.

NOTE: The EyeDropper API is still experimental and supported only on Chromium based browsers. In not supported browsers, the color picker button is not displayed at all.

API documentation • Demo

Install

$ npm install --save @georapbox/eye-dropper-element

Usage

Script

import { EyeDropperElement } from './node_modules/@georapbox/eye-dropper-element/dist/eye-dropper.js';

// Manually define the element.
EyeDropperElement.defineCustomElement();

Alternatively, you can import the automatically defined custom element.

import './node_modules/@georapbox/eye-dropper-element/dist/eye-dropper-defined.js';

Markup

<eye-dropper></eye-dropper>

API

Properties

Name	Reflects	Type	Default	Description
disabled	✓	Boolean	false	Optional. Defines if the color picker button is disabled.
copy	✓	Boolean	false	Optional. Defines if the last color picked will be copied to clipboard.

Slots

Name	Description
button	Override the color picker button with another element of your preference. Example: <a href="#" slot="button" role="button">Pick a color</a>
button-label	Override the color picker button's label with content of your preference. Example: <span slot="button-label">Pick a color</span>

CSS Parts

Name	Description
button	The color picker button.
button--disabled	The color picker button when is disabled.

Methods

Name	Type	Description	Arguments
defineCustomElement	Static	Defines/registers the custom element with the name provided. If no name is provided, the default name is used. The method checks if the element is already defined, hence will skip trying to redefine it.	elementName='eye-dropper'

Events

Name	Description	Event Detail
eye-dropper:success	Emitted when color pick is successful.	{ result: { sRGBHex: String }, colors: String[] }
eye-dropper:abort	Emitted when color pick is aborted.	-
eye-dropper:error	Emitted if color pick fails for any reason.	{ error: TypeError }
eye-dropper:copy	Emitted if copy property is true and the picked color is successfully copied to clipbaord.	{ value: String }

Changelog

For API updates and breaking changes, check the CHANGELOG.

Browser support

Browsers without native custom element support require a polyfill.

• Firefox
• Chrome
• Microsoft Edge
• Safari

License

The MIT License (MIT)