react-best-gradient-color-picker - npm Package Compare versions

Comparing version 3.0.14-beta.2 to 3.0.14

dist/cjs/hooks/useColorPicker.d.ts

@@ -1,2 +0,3 @@
-export declare const useColorPicker: (value: string, onChange: (arg0: string) => void, defaultColor?: string, defaultGradient?: string) => {
+import { Config } from '../shared/types.js';
+export declare const useColorPicker: (value: string, onChange: (arg0: string) => void, config?: Config) => {
     setR: (newR: number) => void;
@@ -3,0 +4,0 @@ setG: (newG: number) => void;

dist/cjs/hooks/useColorPicker.js

@@ -27,17 +27,16 @@ "use strict";
 exports.useColorPicker = void 0;
+var tinycolor2_1 = __importDefault(require("tinycolor2"));
 var react_1 = require("react");
+var converters_js_1 = require("../utils/converters.js");
 var utils_js_1 = require("../utils/utils.js");
 var formatters_js_1 = require("../utils/formatters.js");
-var converters_js_1 = require("../utils/converters.js");
-var tinycolor2_1 = __importDefault(require("tinycolor2"));
-var useColorPicker = function (value, onChange, defaultColor, defaultGradient) {
-    var safeDefaultColor = defaultColor !== null && defaultColor !== void 0 ? defaultColor : 'rgba(175, 51, 242, 1)';
-    var safeDefaultGradient = defaultGradient !== null && defaultGradient !== void 0 ? defaultGradient : 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)';
-    var colors = (0, formatters_js_1.getColors)(value, safeDefaultColor, safeDefaultGradient);
-    var _a = (0, utils_js_1.getDetails)(value), degrees = _a.degrees, degreeStr = _a.degreeStr, isGradient = _a.isGradient, gradientType = _a.gradientType;
-    var _b = (0, utils_js_1.getColorObj)(colors, safeDefaultGradient), currentColor = _b.currentColor, selectedColor = _b.selectedColor, currentLeft = _b.currentLeft;
-    var _c = (0, react_1.useState)([]), previousColors = _c[0], setPreviousColors = _c[1];
+var useColorPicker = function (value, onChange, config) {
+    var _a = config !== null && config !== void 0 ? config : {}, _b = _a.defaultColor, defaultColor = _b === void 0 ? 'rgba(175, 51, 242, 1)' : _b, _c = _a.defaultGradient, defaultGradient = _c === void 0 ? 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)' : _c;
+    var colors = (0, formatters_js_1.getColors)(value, defaultColor, defaultGradient);
+    var _d = (0, utils_js_1.getDetails)(value), degrees = _d.degrees, degreeStr = _d.degreeStr, isGradient = _d.isGradient, gradientType = _d.gradientType;
+    var _e = (0, utils_js_1.getColorObj)(colors, defaultGradient), currentColor = _e.currentColor, selectedColor = _e.selectedColor, currentLeft = _e.currentLeft;
+    var _f = (0, react_1.useState)([]), previousColors = _f[0], setPreviousColors = _f[1];
     var getGradientObject = function (currentValue) {
         if (currentValue) {
-            colors = (0, formatters_js_1.getColors)(currentValue, safeDefaultColor, safeDefaultGradient);
+            colors = (0, formatters_js_1.getColors)(currentValue, defaultColor, defaultGradient);
         }
@@ -73,4 +72,4 @@ if (value) {
     var tiny = (0, tinycolor2_1.default)(currentColor);
-    var _d = tiny.toRgb(), r = _d.r, g = _d.g, b = _d.b, a = _d.a;
-    var _e = tiny.toHsl(), h = _e.h, s = _e.s, l = _e.l;
+    var _g = tiny.toRgb(), r = _g.r, g = _g.g, b = _g.b, a = _g.a;
+    var _h = tiny.toHsl(), h = _h.h, s = _h.s, l = _h.l;
     (0, react_1.useEffect)(function () {
@@ -77,0 +76,0 @@ var _a;

dist/esm/hooks/useColorPicker.d.ts

@@ -1,2 +0,3 @@
-export declare const useColorPicker: (value: string, onChange: (arg0: string) => void, defaultColor?: string, defaultGradient?: string) => {
+import { Config } from '../shared/types.js';
+export declare const useColorPicker: (value: string, onChange: (arg0: string) => void, config?: Config) => {
     setR: (newR: number) => void;
@@ -3,0 +4,0 @@ setG: (newG: number) => void;

dist/esm/hooks/useColorPicker.js

@@ -21,17 +21,16 @@ var __assign = (this && this.__assign) || function () {
 };
+import tc from 'tinycolor2';
 import { useState, useEffect } from 'react';
+import { rgb2cmyk } from '../utils/converters.js';
 import { isUpperCase, getDetails, getColorObj } from '../utils/utils.js';
 import { low, high, getColors, formatInputValues } from '../utils/formatters.js';
-import { rgb2cmyk } from '../utils/converters.js';
-import tc from 'tinycolor2';
-export var useColorPicker = function (value, onChange, defaultColor, defaultGradient) {
-    var safeDefaultColor = defaultColor !== null && defaultColor !== void 0 ? defaultColor : 'rgba(175, 51, 242, 1)';
-    var safeDefaultGradient = defaultGradient !== null && defaultGradient !== void 0 ? defaultGradient : 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)';
-    var colors = getColors(value, safeDefaultColor, safeDefaultGradient);
-    var _a = getDetails(value), degrees = _a.degrees, degreeStr = _a.degreeStr, isGradient = _a.isGradient, gradientType = _a.gradientType;
-    var _b = getColorObj(colors, safeDefaultGradient), currentColor = _b.currentColor, selectedColor = _b.selectedColor, currentLeft = _b.currentLeft;
-    var _c = useState([]), previousColors = _c[0], setPreviousColors = _c[1];
+export var useColorPicker = function (value, onChange, config) {
+    var _a = config !== null && config !== void 0 ? config : {}, _b = _a.defaultColor, defaultColor = _b === void 0 ? 'rgba(175, 51, 242, 1)' : _b, _c = _a.defaultGradient, defaultGradient = _c === void 0 ? 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)' : _c;
+    var colors = getColors(value, defaultColor, defaultGradient);
+    var _d = getDetails(value), degrees = _d.degrees, degreeStr = _d.degreeStr, isGradient = _d.isGradient, gradientType = _d.gradientType;
+    var _e = getColorObj(colors, defaultGradient), currentColor = _e.currentColor, selectedColor = _e.selectedColor, currentLeft = _e.currentLeft;
+    var _f = useState([]), previousColors = _f[0], setPreviousColors = _f[1];
     var getGradientObject = function (currentValue) {
         if (currentValue) {
-            colors = getColors(currentValue, safeDefaultColor, safeDefaultGradient);
+            colors = getColors(currentValue, defaultColor, defaultGradient);
         }
@@ -67,4 +66,4 @@ if (value) {
     var tiny = tc(currentColor);
-    var _d = tiny.toRgb(), r = _d.r, g = _d.g, b = _d.b, a = _d.a;
-    var _e = tiny.toHsl(), h = _e.h, s = _e.s, l = _e.l;
+    var _g = tiny.toRgb(), r = _g.r, g = _g.g, b = _g.b, a = _g.a;
+    var _h = tiny.toHsl(), h = _h.h, s = _h.s, l = _h.l;
     useEffect(function () {
@@ -71,0 +70,0 @@ var _a;

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.14-beta.2",
+  "version": "3.0.14",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "type": "module",

src/hooks/useColorPicker.ts

@@ -0,7 +1,7 @@
+import tc from 'tinycolor2'
 import { useState, useEffect } from 'react'
+import { rgb2cmyk } from '../utils/converters.js'
+import { ColorsProps, GradientProps, Config } from '../shared/types.js'
 import { isUpperCase, getDetails, getColorObj } from '../utils/utils.js'
 import { low, high, getColors, formatInputValues } from '../utils/formatters.js'
-import { rgb2cmyk } from '../utils/converters.js'
-import tc from 'tinycolor2'
-import { ColorsProps, GradientProps } from '../shared/types.js'
 
@@ -11,17 +11,20 @@ export const useColorPicker = (
   onChange: (arg0: string) => void,
-  defaultColor?: string,
-  defaultGradient?: string
+  config?: Config
 ) => {
-  const safeDefaultColor = defaultColor ?? 'rgba(175, 51, 242, 1)'
-  const safeDefaultGradient = defaultGradient ??
-    'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)'
-  let colors = getColors(value, safeDefaultColor, safeDefaultGradient)
+  const {
+    defaultColor = 'rgba(175, 51, 242, 1)',
+    defaultGradient = 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',
+  } = config ?? {}
+
+  let colors = getColors(value, defaultColor, defaultGradient)
   const { degrees, degreeStr, isGradient, gradientType } = getDetails(value)
-  const { currentColor, selectedColor, currentLeft } = getColorObj(colors, safeDefaultGradient)
+  const { currentColor, selectedColor, currentLeft } = getColorObj(
+    colors,
+    defaultGradient
+  )
   const [previousColors, setPreviousColors] = useState([])
 
   const getGradientObject = (currentValue: string) => {
-    if (currentValue)
-    {
-      colors = getColors(currentValue, safeDefaultColor, safeDefaultGradient)
+    if (currentValue) {
+      colors = getColors(currentValue, defaultColor, defaultGradient)
     }
@@ -28,0 +31,0 @@ if (value) {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

10593

increased by0.02%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

472244

decreased by-0.03%

No dependency changes