Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-eyedrop

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-eyedrop - npm Package Compare versions

Comparing version 5.2.1 to 5.3.0

dist/colorUtils/parseRgb.d.ts

4

dist/constants/errors.d.ts

@@ -9,2 +9,5 @@ export declare const ERROR_MSGS: {

};
targetToCanvas: {
targetNotElement: string;
};
imageToCanvas: {

@@ -19,4 +22,5 @@ targetNotImg: string;

export declare const TARGET_NODE_TYPE_NOT_IMG_ERROR: Error;
export declare const TARGET_NOT_HTML_ELEMENT_ERROR: Error;
export declare const VAL_NOT_RGB_OBJ_ARRAY_ERROR: Error;
export declare const ZERO_PIXELS_FOUND_ERROR: Error;
export declare const ELEMENT_NOT_CANVAS_ERROR: Error;
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ELEMENT_NOT_CANVAS_ERROR = exports.ZERO_PIXELS_FOUND_ERROR = exports.VAL_NOT_RGB_OBJ_ARRAY_ERROR = exports.TARGET_NODE_TYPE_NOT_IMG_ERROR = exports.PICK_RADIUS_OUT_OF_BOUNDS_ERROR = exports.ERROR_MSGS = void 0;
exports.ELEMENT_NOT_CANVAS_ERROR = exports.ZERO_PIXELS_FOUND_ERROR = exports.VAL_NOT_RGB_OBJ_ARRAY_ERROR = exports.TARGET_NOT_HTML_ELEMENT_ERROR = exports.TARGET_NODE_TYPE_NOT_IMG_ERROR = exports.PICK_RADIUS_OUT_OF_BOUNDS_ERROR = exports.ERROR_MSGS = void 0;
exports.ERROR_MSGS = {

@@ -12,2 +12,5 @@ calcAverageColor: {

},
targetToCanvas: {
targetNotElement: 'targetToCanvas: event target not HTML element'
},
imageToCanvas: {

@@ -22,4 +25,5 @@ targetNotImg: 'imageToCanvas: event target not of node type img'

exports.TARGET_NODE_TYPE_NOT_IMG_ERROR = new Error(exports.ERROR_MSGS.imageToCanvas.targetNotImg);
exports.TARGET_NOT_HTML_ELEMENT_ERROR = new Error(exports.ERROR_MSGS.targetToCanvas.targetNotElement);
exports.VAL_NOT_RGB_OBJ_ARRAY_ERROR = new Error(exports.ERROR_MSGS.calcAverageColor.notArrayOfRgbObj);
exports.ZERO_PIXELS_FOUND_ERROR = new Error(exports.ERROR_MSGS.calcAverageColor.noPixelsFound);
exports.ELEMENT_NOT_CANVAS_ERROR = new Error(exports.ERROR_MSGS.getCanvasBlockColors.elementNotCanvas);

70

dist/eyeDropper.js
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EyeDropper = void 0;
const React = require("react");
const getCanvasPixelColor = require("get-canvas-pixel-color");
const _html2canvas = require("html2canvas");
const calcAverageColor_1 = require("./calcAverageColor");
const extractColors_1 = require("./extractColors");
const imageToCanvas_1 = require("./imageToCanvas");
const parseRgb_1 = require("./parseRgb");
const rgbToHex_1 = require("./rgbToHex");
const validatePickRadius_1 = require("./validatePickRadius");
const html2canvas = _html2canvas;
const parseRgb_1 = require("./colorUtils/parseRgb");
const rgbToHex_1 = require("./colorUtils/rgbToHex");
const validatePickRadius_1 = require("./validations/validatePickRadius");
const targetToCanvas_1 = require("./targetToCanvas");
const getColor_1 = require("./getColor");
const { useCallback, useEffect, useState } = React;

@@ -46,7 +51,7 @@ const styles = {

});
onPickEnd();
onPickEnd && onPickEnd();
}, [setPickingMode, onPickEnd]);
const exitPickByEscKey = useCallback((event) => {
event.keyCode === 27 && pickingColorFromDocument && deactivateColorPicking();
}, [setPickingMode, pickingColorFromDocument]);
event.code === 'Escape' && pickingColorFromDocument && deactivateColorPicking();
}, [pickingColorFromDocument, deactivateColorPicking]);
const pickColor = () => {

@@ -69,28 +74,9 @@ if (onPickStart) {

}, [customProps, onChange]);
const targetToCanvas = useCallback((e) => {
const extractColor = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
const { target } = e;
if (target.nodeName.toLowerCase() === 'img') {
// Convert image to canvas because `html2canvas` can not
const { offsetX, offsetY } = e;
(0, imageToCanvas_1.imageToCanvas)(target).then((value) => {
const { r, g, b } = getCanvasPixelColor(value, offsetX, offsetY);
updateColors({ r, g, b });
once && deactivateColorPicking();
});
return;
}
const { offsetX, offsetY } = e;
html2canvas(target, { logging: false }).then((canvasEl) => {
if (pickRadius === undefined || pickRadius === 0) {
const { r, g, b } = getCanvasPixelColor(canvasEl, offsetX, offsetY);
updateColors({ r, g, b });
}
else {
const colorBlock = (0, extractColors_1.extractColors)(canvasEl, pickRadius, offsetX, offsetY);
const rgbColor = (0, calcAverageColor_1.calcAverageColor)(colorBlock);
updateColors(rgbColor);
}
});
const targetCanvas = yield (0, targetToCanvas_1.targetToCanvas)(target);
const rgbColor = (0, getColor_1.getColor)(pickRadius, targetCanvas, e);
updateColors(rgbColor);
once && deactivateColorPicking();
}, [deactivateColorPicking, once, pickRadius, updateColors]);
}), [deactivateColorPicking, once, pickRadius, updateColors]);
useEffect(() => {

@@ -105,15 +91,17 @@ onInit && onInit();

if (pickingColorFromDocument) {
document.addEventListener('click', targetToCanvas);
document.addEventListener('click', extractColor);
}
return () => {
document.removeEventListener('click', targetToCanvas);
document.removeEventListener('click', extractColor);
};
}, [pickingColorFromDocument, once, targetToCanvas]);
}, [pickingColorFromDocument, once, extractColor]);
// setup listener for the esc key
useEffect(() => {
document.addEventListener('keydown', exitPickByEscKey);
if (pickingColorFromDocument) {
document.addEventListener('keydown', exitPickByEscKey);
}
return () => {
document.removeEventListener('keydown', exitPickByEscKey);
};
}, [exitPickByEscKey]);
}, [pickingColorFromDocument, exitPickByEscKey]);
const shouldColorsPassThrough = colorsPassThrough ? { [colorsPassThrough]: colors } : {};

@@ -120,0 +108,0 @@ return (React.createElement("div", { style: styles.eyedropperWrapper, className: wrapperClasses }, CustomComponent ? (React.createElement(CustomComponent, Object.assign({ onClick: pickColor }, shouldColorsPassThrough, { customProps: customProps, disabled: buttonDisabled }))) : (React.createElement(React.Fragment, null,

@@ -6,3 +6,4 @@ import { HookOptions } from './types';

};
export declare const useEyeDrop: ({ once, pickRadius, cursorActive, cursorInactive, }?: HookOptions) => [typeof initialStateColors, () => void, () => void];
declare type ReturnValue = [typeof initialStateColors, () => void, () => void];
export declare const useEyeDrop: ({ once, pickRadius, cursorActive, cursorInactive, }?: HookOptions) => ReturnValue;
export {};
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useEyeDrop = void 0;
const React = require("react");
const getCanvasPixelColor = require("get-canvas-pixel-color");
const _html2canvas = require("html2canvas");
const imageToCanvas_1 = require("./imageToCanvas");
const extractColors_1 = require("./extractColors");
const calcAverageColor_1 = require("./calcAverageColor");
const parseRgb_1 = require("./parseRgb");
const rgbToHex_1 = require("./rgbToHex");
const parseRgb_1 = require("./colorUtils/parseRgb");
const rgbToHex_1 = require("./colorUtils/rgbToHex");
const targetToCanvas_1 = require("./targetToCanvas");
const getColor_1 = require("./getColor");
const react_1 = require("react");
const { useEffect, useState } = React;
const html2canvas = _html2canvas;
const initialStateColors = { rgb: '', hex: '' };

@@ -21,2 +27,8 @@ const useEyeDrop = ({ once, pickRadius, cursorActive = 'copy', cursorInactive = 'auto', } = {}) => {

};
const cancelPickColor = () => {
setPickingColorFromDocument(false);
};
const exitPickByEscKey = (0, react_1.useCallback)((event) => {
event.code === 'Escape' && pickingColorFromDocument && cancelPickColor();
}, [pickingColorFromDocument, cancelPickColor]);
const updateColors = (rgbObj) => {

@@ -27,49 +39,33 @@ const rgb = (0, parseRgb_1.parseRGB)(rgbObj);

};
const targetToCanvas = (e) => {
const extractColor = (0, react_1.useCallback)((e) => __awaiter(void 0, void 0, void 0, function* () {
const { target } = e;
if (target.nodeName.toLowerCase() === 'img') {
// Convert image to canvas because `html2canvas` can not
const { offsetX, offsetY } = e;
(0, imageToCanvas_1.imageToCanvas)(target).then((value) => {
const { r, g, b } = getCanvasPixelColor(value, offsetX, offsetY);
updateColors({ r, g, b });
once && setPickingColorFromDocument(false);
});
return;
}
const { offsetX, offsetY } = e;
html2canvas(target, { logging: false })
.then((canvasEl) => {
if (pickRadius === undefined || pickRadius === 0) {
const { r, g, b } = getCanvasPixelColor(canvasEl, offsetX, offsetY);
updateColors({ r, g, b });
}
else {
const colorBlock = (0, extractColors_1.extractColors)(canvasEl, pickRadius, offsetX, offsetY);
const rgbColor = (0, calcAverageColor_1.calcAverageColor)(colorBlock);
updateColors(rgbColor);
}
});
const targetCanvas = yield (0, targetToCanvas_1.targetToCanvas)(target);
const rgbColor = (0, getColor_1.getColor)(pickRadius, targetCanvas, e);
updateColors(rgbColor);
once && setPickingColorFromDocument(false);
};
const cancelPickColor = () => {
setPickingColorFromDocument(false);
};
}), [once, setPickingColorFromDocument]);
useEffect(() => {
if (pickingColorFromDocument) {
document.addEventListener('click', targetToCanvas);
document.addEventListener('click', extractColor);
}
return () => {
if (once || pickingColorFromDocument) {
document.removeEventListener('click', targetToCanvas);
}
document.removeEventListener('click', extractColor);
};
}, [pickingColorFromDocument, once]);
}, [pickingColorFromDocument, once, extractColor]);
// setup listener for the esc key
useEffect(() => {
if (pickingColorFromDocument) {
document.addEventListener('keydown', exitPickByEscKey);
}
return () => {
document.removeEventListener('keydown', exitPickByEscKey);
};
}, [pickingColorFromDocument, exitPickByEscKey]);
useEffect(() => {
if (document.body) {
document.body.style.cursor = pickingColorFromDocument ? cursorActive : cursorInactive;
}
}, [pickingColorFromDocument]);
}, [pickingColorFromDocument, cursorActive, cursorInactive]);
return [colors, pickColor, cancelPickColor];
};
exports.useEyeDrop = useEyeDrop;
{
"name": "react-eyedrop",
"version": "5.2.1",
"version": "5.3.0",
"description": "A reusable ColorPick EyeDropper written in React & TypeScript.",

@@ -29,3 +29,3 @@ "main": "dist/index.js",

"scripts": {
"build": "tsc",
"build": "rm -rf dist && tsc",
"test": "jest",

@@ -32,0 +32,0 @@ "test:watch": "jest --watch",

@@ -283,3 +283,5 @@ # React EyeDrop

* 5.2.0
* 5.3.0
* Now handles any HTML element with background property
* 5.2.1
* Added `onPickEnd` property

@@ -286,0 +288,0 @@ * 5.1.3

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc