react-qrcode-logo - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/index.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
     size?: number;
-    padding?: number;
+    quietZone?: number;
     bgColor?: string;
@@ -15,2 +15,3 @@ fgColor?: string;
     logoOpacity?: number;
+    qrStyle?: 'squares' | 'dots';
     style?: object;
@@ -21,3 +22,4 @@ }
     static defaultProps: IProps;
-    static utf16to8(str: string): string;
+    private static utf16to8;
+    private drawPositioningPattern;
     constructor(props: IProps);
@@ -24,0 +26,0 @@ shouldComponentUpdate(nextProps: IProps): boolean;

dist/index.js

@@ -15,16 +15,5 @@ "use strict";
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var isEqual = require("lodash.isequal");
-var qrcode = require("qrcode-generator");
+var qrGenerator = require("qrcode-generator");
 var React = require("react");
@@ -59,2 +48,21 @@ var ReactDOM = require("react-dom");
     };
+    QRCode.prototype.drawPositioningPattern = function (row, col, length, ctx) {
+        var cellSize = this.props.size / length;
+        for (var r = -1; r <= 7; r++) {
+            if (!(row + r <= -1 || length <= row + r)) {
+                for (var c = -1; c <= 7; c++) {
+                    if (!(col + c <= -1 || length <= col + c) &&
+                        (0 <= r && r <= 6 && (c == 0 || c == 6)) ||
+                        (0 <= c && c <= 6 && (r == 0 || r == 6)) ||
+                        (2 <= r && r <= 4 && 2 <= c && c <= 4)) {
+                        var w = (Math.ceil(((row + r) + 1) * cellSize) - Math.floor((row + r) * cellSize));
+                        var h = (Math.ceil(((col + c) + 1) * cellSize) - Math.floor((col + c) * cellSize));
+                        ctx.fillStyle = this.props.fgColor;
+                        ctx.fillRect(Math.round((row + r) * cellSize), Math.round((col + c) * cellSize), w, h);
+                    }
+                }
+            }
+        }
+    };
+    ;
     QRCode.prototype.shouldComponentUpdate = function (nextProps) {
@@ -70,21 +78,44 @@ return !isEqual(this.props, nextProps);
     QRCode.prototype.update = function () {
-        var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, enableCORS = _a.enableCORS, size = _a.size, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoWidth = _a.logoWidth, logoHeight = _a.logoHeight, logoOpacity = _a.logoOpacity;
-        var myqrcode = qrcode(0, ecLevel);
-        myqrcode.addData(QRCode.utf16to8(value));
-        myqrcode.make();
+        var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, enableCORS = _a.enableCORS, size = _a.size, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoWidth = _a.logoWidth, logoHeight = _a.logoHeight, logoOpacity = _a.logoOpacity, qrStyle = _a.qrStyle;
+        var qrCode = qrGenerator(0, ecLevel);
+        qrCode.addData(QRCode.utf16to8(value));
+        qrCode.make();
         var canvas = ReactDOM.findDOMNode(this.canvas.current);
         var ctx = canvas.getContext('2d');
-        var tileW = size / myqrcode.getModuleCount();
-        var tileH = size / myqrcode.getModuleCount();
+        var length = qrCode.getModuleCount();
+        var cellSize = size / length;
         var scale = (window.devicePixelRatio || 1);
         canvas.height = canvas.width = size * scale;
         ctx.scale(scale, scale);
-        for (var i = 0; i < (myqrcode.getModuleCount()); i++) {
-            for (var j = 0; j < (myqrcode.getModuleCount()); j++) {
-                ctx.fillStyle = myqrcode.isDark(i, j) ? fgColor : bgColor;
-                var w = (Math.ceil((j + 1) * tileW) - Math.floor(j * tileW));
-                var h = (Math.ceil((i + 1) * tileH) - Math.floor(i * tileH));
-                ctx.fillRect(Math.round(j * tileW), Math.round(i * tileH), w, h);
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, size, size);
+        if (qrStyle === 'dots') {
+            ctx.fillStyle = fgColor;
+            var radius = cellSize / 2;
+            for (var row = 0; row < length; row++) {
+                for (var col = 0; col < length; col++) {
+                    if (qrCode.isDark(row, col)) {
+                        ctx.beginPath();
+                        ctx.arc(Math.round(col * cellSize) + radius, Math.round(row * cellSize) + radius, (radius / 100) * 75, 0, 2 * Math.PI, false);
+                        ctx.closePath();
+                        ctx.fill();
+                    }
+                }
             }
+            this.drawPositioningPattern(0, 0, length, ctx);
+            this.drawPositioningPattern(length - 7, 0, length, ctx);
+            this.drawPositioningPattern(0, length - 7, length, ctx);
         }
+        else {
+            for (var row = 0; row < length; row++) {
+                for (var col = 0; col < length; col++) {
+                    if (qrCode.isDark(row, col)) {
+                        ctx.fillStyle = fgColor;
+                        var w = (Math.ceil((col + 1) * cellSize) - Math.floor(col * cellSize));
+                        var h = (Math.ceil((row + 1) * cellSize) - Math.floor(row * cellSize));
+                        ctx.fillRect(Math.round(col * cellSize), Math.round(row * cellSize), w, h);
+                    }
+                }
+            }
+        }
         if (logoImage) {
@@ -115,3 +146,8 @@ var image_1 = new Image();
             width: this.props.size,
-            style: __assign({ height: this.props.size + 'px', width: this.props.size + 'px', padding: (100 * this.props.padding) / this.props.size + '%', background: this.props.bgColor }, this.props.style),
+            style: {
+                height: this.props.size + 'px',
+                width: this.props.size + 'px',
+                padding: this.props.quietZone + 'px',
+                background: this.props.bgColor
+            },
             ref: this.canvas
@@ -125,6 +161,7 @@ });
         size: 150,
-        padding: 10,
+        quietZone: 10,
         bgColor: '#FFFFFF',
         fgColor: '#000000',
-        logoOpacity: 1
+        logoOpacity: 1,
+        qrStyle: 'squares'
     };
@@ -131,0 +168,0 @@ return QRCode;

package.json

 {
   "name": "react-qrcode-logo",
-  "version": "2.1.0",
+  "version": "2.2.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. Inspired by [cssivision/qrcode-react](https://github.com/cssivision/qrcode-react) and [zpao/qrcode.react](https://github.com/zpao/qrcode.react).
+Typescript React component to generate a customizable QR Code.
 
@@ -21,10 +21,10 @@ ## Installation
 
-## Available Props
+## Props
 | 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' |
+| `value`       | `string`                                | `https://reactjs.org/` | The value encoded in the QR Code. When the QR Code is decoded, this value will be returned |
+| `ecLevel`        | `L` | `M` | `Q` | `H`              |   `M`              | The error correction level of the QR Code |
 | `enableCORS`         | `boolean`                 |   `false`              | Enable crossorigin attribute |
-| `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 |
+| `size`        | `number` (in pixels)                    |   `150`                | The size of the QR Code |
+| `quietZone`     | `number` (in pixels)                    |   `10`                 | The size of the quiet zone around the QR Code. This will have the same color as QR Code bgColor |
 | `bgColor`     | `string` (css color)                    | `#FFFFFF`              | Background color |
@@ -36,2 +36,8 @@ | `fgColor`     | `string` (css color)                    | `#000000`              | Foreground color |
 | `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 | 
+| `qrStyle` | `squares` &#124; `dots` | `squares`  | Style of the QR Code modules |
+
+## Credits 
+This package was inspired by [cssivision/qrcode-react](https://github.com/cssivision/qrcode-react) and [zpao/qrcode.react](https://github.com/zpao/qrcode.react). Also looked up some parts from [kazuhikoarase/qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) (which this package depends on). 
+
+## Contributing
+PR's are welcome. Thanks to everyone who contributed :)

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

20361

increased by29.84%

Number of package files

8

increased by14.29%

Lines of code

375

increased by29.76%

Number of lines in readme file

42

increased by16.67%

No dependency changes