qrcode.react - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

lib/esm/index.js

@@ -31,3 +31,3 @@ var __defProp = Object.defineProperty;
 // src/index.tsx
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 
@@ -641,9 +641,7 @@ // src/third-party/qrcodegen/index.ts
 };
-var DEFAULT_PROPS = {
-  size: 128,
-  level: "L",
-  bgColor: "#FFFFFF",
-  fgColor: "#000000",
-  includeMargin: false
-};
+var DEFAULT_SIZE = 128;
+var DEFAULT_LEVEL = "L";
+var DEFAULT_BGCOLOR = "#FFFFFF";
+var DEFAULT_FGCOLOR = "#000000";
+var DEFAULT_INCLUDEMARGIN = false;
 var MARGIN_SIZE = 4;
@@ -692,4 +690,3 @@ var DEFAULT_IMG_SCALE = 0.1;
 }
-function getImageSettings(props, cells) {
-  const { imageSettings, size, includeMargin } = props;
+function getImageSettings(cells, size, includeMargin, imageSettings) {
   if (imageSettings == null) {
@@ -725,6 +722,26 @@ return null;
 function QRCodeCanvas(props) {
+  const _a = props, {
+    value,
+    size = DEFAULT_SIZE,
+    level = DEFAULT_LEVEL,
+    bgColor = DEFAULT_BGCOLOR,
+    fgColor = DEFAULT_FGCOLOR,
+    includeMargin = DEFAULT_INCLUDEMARGIN,
+    style,
+    imageSettings
+  } = _a, otherProps = __objRest(_a, [
+    "value",
+    "size",
+    "level",
+    "bgColor",
+    "fgColor",
+    "includeMargin",
+    "style",
+    "imageSettings"
+  ]);
+  const imgSrc = imageSettings == null ? void 0 : imageSettings.src;
   const _canvas = useRef(null);
   const _image = useRef(null);
-  function update() {
-    const { value: value2, size: size2, level: level2, bgColor: bgColor2, fgColor: fgColor2, includeMargin: includeMargin2 } = props;
+  const [isImgLoaded, setIsImageLoaded] = useState(false);
+  useEffect(() => {
     if (_canvas.current != null) {
@@ -736,6 +753,6 @@ const canvas = _canvas.current;
       }
-      let cells = qrcodegen_default.QrCode.encodeText(value2, ERROR_LEVEL_MAP[level2]).getModules();
-      const margin = includeMargin2 ? MARGIN_SIZE : 0;
+      let cells = qrcodegen_default.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+      const margin = includeMargin ? MARGIN_SIZE : 0;
       const numCells = cells.length + margin * 2;
-      const calculatedImageSettings = getImageSettings(props, cells);
+      const calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
       const image = _image.current;
@@ -749,8 +766,8 @@ const haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
       const pixelRatio = window.devicePixelRatio || 1;
-      canvas.height = canvas.width = size2 * pixelRatio;
-      const scale = size2 / numCells * pixelRatio;
+      canvas.height = canvas.width = size * pixelRatio;
+      const scale = size / numCells * pixelRatio;
       ctx.scale(scale, scale);
-      ctx.fillStyle = bgColor2;
+      ctx.fillStyle = bgColor;
       ctx.fillRect(0, 0, numCells, numCells);
-      ctx.fillStyle = fgColor2;
+      ctx.fillStyle = fgColor;
       if (SUPPORTS_PATH2D) {
@@ -771,28 +788,8 @@ ctx.fill(new Path2D(generatePath(cells, margin)));
     }
-  }
+  });
   useEffect(() => {
-    update();
-  });
-  const _a = props, {
-    value,
-    size,
-    level,
-    bgColor,
-    fgColor,
-    style,
-    includeMargin,
-    imageSettings
-  } = _a, otherProps = __objRest(_a, [
-    "value",
-    "size",
-    "level",
-    "bgColor",
-    "fgColor",
-    "style",
-    "includeMargin",
-    "imageSettings"
-  ]);
+    setIsImageLoaded(false);
+  }, [imgSrc]);
   const canvasStyle = __spreadValues({ height: size, width: size }, style);
   let img = null;
-  let imgSrc = imageSettings == null ? void 0 : imageSettings.src;
   if (imgSrc != null) {
@@ -804,3 +801,3 @@ img = /* @__PURE__ */ React.createElement("img", {
       onLoad: () => {
-        update();
+        setIsImageLoaded(true);
       },
@@ -817,11 +814,10 @@ ref: _image
 }
-QRCodeCanvas.defaultProps = DEFAULT_PROPS;
 function QRCodeSVG(props) {
   const _a = props, {
     value,
-    size,
-    level,
-    bgColor,
-    fgColor,
-    includeMargin,
+    size = DEFAULT_SIZE,
+    level = DEFAULT_LEVEL,
+    bgColor = DEFAULT_BGCOLOR,
+    fgColor = DEFAULT_FGCOLOR,
+    includeMargin = DEFAULT_INCLUDEMARGIN,
     imageSettings
@@ -840,3 +836,3 @@ } = _a, otherProps = __objRest(_a, [
   const numCells = cells.length + margin * 2;
-  const calculatedImageSettings = getImageSettings(props, cells);
+  const calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
   let image = null;
@@ -858,3 +854,2 @@ if (imageSettings != null && calculatedImageSettings != null) {
   return /* @__PURE__ */ React.createElement("svg", __spreadValues({
-    shapeRendering: "crispEdges",
     height: size,
@@ -865,9 +860,10 @@ width: size,
     fill: bgColor,
-    d: `M0,0 h${numCells}v${numCells}H0z`
+    d: `M0,0 h${numCells}v${numCells}H0z`,
+    shapeRendering: "crispEdges"
   }), /* @__PURE__ */ React.createElement("path", {
     fill: fgColor,
-    d: fgPath
+    d: fgPath,
+    shapeRendering: "crispEdges"
   }), image);
 }
-QRCodeSVG.defaultProps = DEFAULT_PROPS;
 var QRCode = (props) => {
@@ -880,3 +876,2 @@ const _a = props, { renderAs } = _a, otherProps = __objRest(_a, ["renderAs"]);
 };
-QRCode.defaultProps = __spreadValues({ renderAs: "canvas" }, DEFAULT_PROPS);
 export {
@@ -883,0 +878,0 @@ QRCodeCanvas,

lib/index.d.ts

@@ -9,18 +9,19 @@ import React, { CSSProperties } from 'react';
 
+declare type ImageSettings = {
+    src: string;
+    height: number;
+    width: number;
+    excavate: boolean;
+    x?: number;
+    y?: number;
+};
 declare type QRProps = {
     value: string;
-    size: number;
-    level: string;
-    bgColor: string;
-    fgColor: string;
+    size?: number;
+    level?: string;
+    bgColor?: string;
+    fgColor?: string;
     style?: CSSProperties;
-    includeMargin: boolean;
-    imageSettings?: {
-        src: string;
-        height: number;
-        width: number;
-        excavate: boolean;
-        x?: number;
-        y?: number;
-    };
+    includeMargin?: boolean;
+    imageSettings?: ImageSettings;
 };
@@ -30,38 +31,10 @@ declare type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
 declare function QRCodeCanvas(props: QRPropsCanvas): JSX.Element;
-declare namespace QRCodeCanvas {
-    var defaultProps: {
-        size: number;
-        level: string;
-        bgColor: string;
-        fgColor: string;
-        includeMargin: boolean;
-    };
-}
 declare function QRCodeSVG(props: QRPropsSVG): JSX.Element;
-declare namespace QRCodeSVG {
-    var defaultProps: {
-        size: number;
-        level: string;
-        bgColor: string;
-        fgColor: string;
-        includeMargin: boolean;
-    };
-}
 declare type RootProps = (QRPropsSVG & {
     renderAs: 'svg';
 }) | (QRPropsCanvas & {
-    renderAs: 'canvas';
+    renderAs?: 'canvas';
 });
-declare const QRCode: {
-    (props: RootProps): JSX.Element;
-    defaultProps: {
-        size: number;
-        level: string;
-        bgColor: string;
-        fgColor: string;
-        includeMargin: boolean;
-        renderAs: string;
-    };
-};
+declare const QRCode: (props: RootProps) => JSX.Element;
 
 export { QRCodeCanvas, QRCodeSVG, QRCode as default };

lib/index.js

@@ -665,9 +665,7 @@ var __create = Object.create;
 };
-var DEFAULT_PROPS = {
-  size: 128,
-  level: "L",
-  bgColor: "#FFFFFF",
-  fgColor: "#000000",
-  includeMargin: false
-};
+var DEFAULT_SIZE = 128;
+var DEFAULT_LEVEL = "L";
+var DEFAULT_BGCOLOR = "#FFFFFF";
+var DEFAULT_FGCOLOR = "#000000";
+var DEFAULT_INCLUDEMARGIN = false;
 var MARGIN_SIZE = 4;
@@ -716,4 +714,3 @@ var DEFAULT_IMG_SCALE = 0.1;
 }
-function getImageSettings(props, cells) {
-  const { imageSettings, size, includeMargin } = props;
+function getImageSettings(cells, size, includeMargin, imageSettings) {
   if (imageSettings == null) {
@@ -749,6 +746,26 @@ return null;
 function QRCodeCanvas(props) {
+  const _a = props, {
+    value,
+    size = DEFAULT_SIZE,
+    level = DEFAULT_LEVEL,
+    bgColor = DEFAULT_BGCOLOR,
+    fgColor = DEFAULT_FGCOLOR,
+    includeMargin = DEFAULT_INCLUDEMARGIN,
+    style,
+    imageSettings
+  } = _a, otherProps = __objRest(_a, [
+    "value",
+    "size",
+    "level",
+    "bgColor",
+    "fgColor",
+    "includeMargin",
+    "style",
+    "imageSettings"
+  ]);
+  const imgSrc = imageSettings == null ? void 0 : imageSettings.src;
   const _canvas = (0, import_react.useRef)(null);
   const _image = (0, import_react.useRef)(null);
-  function update() {
-    const { value: value2, size: size2, level: level2, bgColor: bgColor2, fgColor: fgColor2, includeMargin: includeMargin2 } = props;
+  const [isImgLoaded, setIsImageLoaded] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
     if (_canvas.current != null) {
@@ -760,6 +777,6 @@ const canvas = _canvas.current;
       }
-      let cells = qrcodegen_default.QrCode.encodeText(value2, ERROR_LEVEL_MAP[level2]).getModules();
-      const margin = includeMargin2 ? MARGIN_SIZE : 0;
+      let cells = qrcodegen_default.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+      const margin = includeMargin ? MARGIN_SIZE : 0;
       const numCells = cells.length + margin * 2;
-      const calculatedImageSettings = getImageSettings(props, cells);
+      const calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
       const image = _image.current;
@@ -773,8 +790,8 @@ const haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
       const pixelRatio = window.devicePixelRatio || 1;
-      canvas.height = canvas.width = size2 * pixelRatio;
-      const scale = size2 / numCells * pixelRatio;
+      canvas.height = canvas.width = size * pixelRatio;
+      const scale = size / numCells * pixelRatio;
       ctx.scale(scale, scale);
-      ctx.fillStyle = bgColor2;
+      ctx.fillStyle = bgColor;
       ctx.fillRect(0, 0, numCells, numCells);
-      ctx.fillStyle = fgColor2;
+      ctx.fillStyle = fgColor;
       if (SUPPORTS_PATH2D) {
@@ -795,28 +812,8 @@ ctx.fill(new Path2D(generatePath(cells, margin)));
     }
-  }
+  });
   (0, import_react.useEffect)(() => {
-    update();
-  });
-  const _a = props, {
-    value,
-    size,
-    level,
-    bgColor,
-    fgColor,
-    style,
-    includeMargin,
-    imageSettings
-  } = _a, otherProps = __objRest(_a, [
-    "value",
-    "size",
-    "level",
-    "bgColor",
-    "fgColor",
-    "style",
-    "includeMargin",
-    "imageSettings"
-  ]);
+    setIsImageLoaded(false);
+  }, [imgSrc]);
   const canvasStyle = __spreadValues({ height: size, width: size }, style);
   let img = null;
-  let imgSrc = imageSettings == null ? void 0 : imageSettings.src;
   if (imgSrc != null) {
@@ -828,3 +825,3 @@ img = /* @__PURE__ */ import_react.default.createElement("img", {
       onLoad: () => {
-        update();
+        setIsImageLoaded(true);
       },
@@ -841,11 +838,10 @@ ref: _image
 }
-QRCodeCanvas.defaultProps = DEFAULT_PROPS;
 function QRCodeSVG(props) {
   const _a = props, {
     value,
-    size,
-    level,
-    bgColor,
-    fgColor,
-    includeMargin,
+    size = DEFAULT_SIZE,
+    level = DEFAULT_LEVEL,
+    bgColor = DEFAULT_BGCOLOR,
+    fgColor = DEFAULT_FGCOLOR,
+    includeMargin = DEFAULT_INCLUDEMARGIN,
     imageSettings
@@ -864,3 +860,3 @@ } = _a, otherProps = __objRest(_a, [
   const numCells = cells.length + margin * 2;
-  const calculatedImageSettings = getImageSettings(props, cells);
+  const calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
   let image = null;
@@ -882,3 +878,2 @@ if (imageSettings != null && calculatedImageSettings != null) {
   return /* @__PURE__ */ import_react.default.createElement("svg", __spreadValues({
-    shapeRendering: "crispEdges",
     height: size,
@@ -889,9 +884,10 @@ width: size,
     fill: bgColor,
-    d: `M0,0 h${numCells}v${numCells}H0z`
+    d: `M0,0 h${numCells}v${numCells}H0z`,
+    shapeRendering: "crispEdges"
   }), /* @__PURE__ */ import_react.default.createElement("path", {
     fill: fgColor,
-    d: fgPath
+    d: fgPath,
+    shapeRendering: "crispEdges"
   }), image);
 }
-QRCodeSVG.defaultProps = DEFAULT_PROPS;
 var QRCode = (props) => {
@@ -904,2 +900,1 @@ const _a = props, { renderAs } = _a, otherProps = __objRest(_a, ["renderAs"]);
 };
-QRCode.defaultProps = __spreadValues({ renderAs: "canvas" }, DEFAULT_PROPS);

package.json

 {
   "name": "qrcode.react",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "React component to generate QR codes",
@@ -20,3 +20,3 @@ "keywords": [
     "pretty": "prettier --write '{*,.*}.{mjs,js,json}' '**/*.{js,json}'",
-    "prepare": "tsc && make clean && make all",
+    "prepack": "make clean && make all && yarn run typecheck",
     "prepublish-docs": "make clean && make all",
@@ -45,4 +45,4 @@ "publish-docs": "gh-pages --dist=examples --src='{index.html,iife/demo.js}'",
     "@babel/preset-typescript": "^7.16.7",
-    "@types/jest": "^27.4.0",
-    "@types/node": "^17.0.5",
+    "@types/jest": "^28.1.3",
+    "@types/node": "^18.0.0",
     "@types/react": "^18.0.8",
@@ -59,3 +59,4 @@ "@types/react-dom": "^18.0.3",
     "eslint-plugin-react": "^7.23.2",
-    "gh-pages": "^3.2.3",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "gh-pages": "^4.0.0",
     "jest": "^28.0.3",
@@ -66,3 +67,3 @@ "prettier": "^2.2.1",
     "react-test-renderer": "^18.0.0",
-    "tsup": "^5.11.13",
+    "tsup": "5.12.6",
     "typescript": "^4.5.4"
@@ -69,0 +70,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

72319

decreased by-0.4%

Dev dependency count

26

increased by4%

Lines of code

1785

decreased by-2.03%

No dependency changes