react-qrcode-logo - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/index.d.ts

 import * as React from 'react';
+declare enum ErrorCorrectionLevel {
+    'L' = 1,
+    'M' = 0,
+    'Q' = 3,
+    'H' = 2
+}
 export interface IProps {
     value?: string;
+    ecLevel?: keyof typeof ErrorCorrectionLevel;
     size?: number;
@@ -14,13 +21,5 @@ padding?: number;
 }
-export interface CanvasRendereringContext2D {
-    webkitBackingStorePixelRatio: number;
-    mozBackingStorePixelRatio: number;
-    msBackingStorePixelRatio: number;
-    oBackingStorePixelRatio: number;
-    backingStorePixelRatio: number;
-}
 export declare class QRCode extends React.Component<IProps, {}> {
     private canvas;
     static defaultProps: IProps;
-    static getBackingStorePixelRatio(ctx: CanvasRendereringContext2D): number;
     static utf16to8(str: string): string;
@@ -42,4 +41,5 @@ constructor(props: IProps);
         } & Object;
-        ref: React.RefObject<HTMLInputElement>;
-    }, HTMLInputElement>;
+        ref: React.RefObject<HTMLCanvasElement>;
+    }, HTMLCanvasElement>;
 }
+export {};

dist/index.js

@@ -18,4 +18,11 @@ "use strict";
 var ReactDOM = require("react-dom");
-var qr = require("qr.js");
+var QRCodeImpl = require("qr.js/lib/QRCode");
 var isEqual = require("lodash.isequal");
+var ErrorCorrectionLevel;
+(function (ErrorCorrectionLevel) {
+    ErrorCorrectionLevel[ErrorCorrectionLevel["L"] = 1] = "L";
+    ErrorCorrectionLevel[ErrorCorrectionLevel["M"] = 0] = "M";
+    ErrorCorrectionLevel[ErrorCorrectionLevel["Q"] = 3] = "Q";
+    ErrorCorrectionLevel[ErrorCorrectionLevel["H"] = 2] = "H";
+})(ErrorCorrectionLevel || (ErrorCorrectionLevel = {}));
 var QRCode = /** @class */ (function (_super) {
@@ -28,14 +35,5 @@ __extends(QRCode, _super);
     }
-    QRCode.getBackingStorePixelRatio = function (ctx) {
-        return (ctx.webkitBackingStorePixelRatio ||
-            ctx.mozBackingStorePixelRatio ||
-            ctx.msBackingStorePixelRatio ||
-            ctx.oBackingStorePixelRatio ||
-            ctx.backingStorePixelRatio ||
-            1);
-    };
     QRCode.utf16to8 = function (str) {
-        var out, i, len, c;
-        out = '';
-        len = str.length;
+        var out = '', i, c;
+        var len = str.length;
         for (i = 0; i < len; i++) {
@@ -69,15 +67,17 @@ c = str.charCodeAt(i);
         var _this = this;
-        var value = QRCode.utf16to8(this.props.value);
-        var qrcode = qr(value);
+        var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, size = _a.size, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoWidth = _a.logoWidth, logoHeight = _a.logoHeight, logoOpacity = _a.logoOpacity;
+        var qrcode = new QRCodeImpl(-1, ErrorCorrectionLevel[ecLevel]);
+        qrcode.addData(QRCode.utf16to8(value));
+        qrcode.make();
         var canvas = ReactDOM.findDOMNode(this.canvas.current);
         var ctx = canvas.getContext('2d');
         var cells = qrcode.modules;
-        var tileW = this.props.size / cells.length;
-        var tileH = this.props.size / cells.length;
-        var scale = (window.devicePixelRatio || 1) / QRCode.getBackingStorePixelRatio(ctx);
-        canvas.height = canvas.width = this.props.size * scale;
+        var tileW = size / cells.length;
+        var tileH = size / cells.length;
+        var scale = (window.devicePixelRatio || 1);
+        canvas.height = canvas.width = size * scale;
         ctx.scale(scale, scale);
         cells.forEach(function (row, rdx) {
             row.forEach(function (cell, cdx) {
-                ctx.fillStyle = cell ? _this.props.fgColor : _this.props.bgColor;
+                ctx.fillStyle = cell ? fgColor : bgColor;
                 var w = (Math.ceil((cdx + 1) * tileW) - Math.floor(cdx * tileW));
@@ -88,17 +88,17 @@ var h = (Math.ceil((rdx + 1) * tileH) - Math.floor(rdx * tileH));
         }, this);
-        if (this.props.logoImage) {
+        if (logoImage) {
             var image_1 = new Image();
             image_1.onload = function () {
-                var dwidth = _this.props.logoWidth || _this.props.size * 0.2;
-                var dheight = _this.props.logoHeight || dwidth;
-                var dx = (_this.props.size - dwidth) / 2;
-                var dy = (_this.props.size - dheight) / 2;
+                var dwidth = logoWidth || size * 0.2;
+                var dheight = logoHeight || dwidth;
+                var dx = (size - dwidth) / 2;
+                var dy = (size - dheight) / 2;
                 image_1.width = dwidth;
                 image_1.height = dheight;
                 ctx.save();
-                ctx.globalAlpha = _this.props.logoOpacity;
+                ctx.globalAlpha = logoOpacity;
                 ctx.drawImage(image_1, dx, dy, dwidth, dheight);
                 ctx.restore();
             };
-            image_1.src = this.props.logoImage;
+            image_1.src = logoImage;
         }
@@ -120,2 +120,3 @@ };
         value: 'https://reactjs.org/',
+        ecLevel: 'M',
         size: 150,
@@ -122,0 +123,0 @@ padding: 10,

package.json

 {
   "name": "react-qrcode-logo",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React component to generate a QR Code customizable with logo and more properties",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # react-qrcode-logo
-Typescript React component to generate a customizable QR Code. Based on [cssivision/qrcode-react](https://github.com/cssivision/qrcode-react).
+Typescript React component to generate a customizable QR Code. Inspired by [cssivision/qrcode-react](https://github.com/cssivision/qrcode-react) and [zpao/qrcode.react](https://github.com/zpao/qrcode.react).
 
@@ -22,13 +22,14 @@ ## Installation
 ## Avaiable Props
-| Prop        | Type                                  | Default value        |
-| ------------|---------------------------------------| ---------------------|
-| value       | string                                | https://reactjs.org/ |
-| size        | number (in pixels)                    |   150                |
-| padding     | number (in pixels)                    |   10                 |
-| bgColor     | string (css color)                    | #FFFFFF              |
-| fgColor     | string (css color)                    | #000000              |
-| logoImage   | string (src attribute)                ||
-| logoWidth   | number (in pixels)                    ||
-| logoHeight  | number (in pixels)                    ||
-| logoOpacity | number (css opacity 0 < x < 1)        | 1|
-| style       | Object (add any css style properties) ||
+| Prop        | Type                                  | Default value        | Description    |
+| ------------|---------------------------------------| ---------------------|-----|
+| `value`       | `string`                                | `https://reactjs.org/` | The value encoded in the QR Code. When the QR is decoded, this value will be returned |
+| `ecLevel`        | `string`                 |   `M`              | The error correction level of the QR Code. It can be either of 'L', 'M', 'Q', 'H' |
+| `size`        | `number` (in pixels)                    |   `150`                | The size of the canvas. Note that in this size is included both the QR Code size itself and the padding aound it |
+| `padding`     | `number` (in pixels)                    |   `10`                 | The padding around the QR Code. This will be the same color of the QR Code bgColor |
+| `bgColor`     | `string` (css color)                    | `#FFFFFF`              | Background color |
+| `fgColor`     | `string` (css color)                    | `#000000`              | Foreground color |
+| `logoImage`   | `string` (src attribute)                |                      | The logo image. It can be a url/path or a base64 value |
+| `logoWidth`   | `number` (in pixels)                    | `size * 0.2`           | Logo image width |
+| `logoHeight`  | `number` (in pixels)                    | `logoWidth`                     | Logo image height |
+| `logoOpacity` | `number` (css opacity 0 <= x <= 1)      | `1`                    | Logo opacity. This allows you to modify the transparency of your logo, so that it won't compromise the readability of the QR Code |
+| `style`       | `Object` (css style properties) |  { height: `size`, width: `size`, padding: `padding`, bgColor: `bgColor`} | You can specify an object with any css style properties you want to add to the canvas. The properties you specify will override the default ones | 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15512

increased by5.84%

Number of lines in readme file

35

increased by2.94%

Worsened metrics

Lines of code

292

decreased by-2.34%

No dependency changes