react-qrcode-logo - npm Package Compare versions

Comparing version 2.8.0 to 2.9.0

CHANGELOG.md

 # Changelog
 
+## [v2.9.0]
+### Features
+- Added new optional prop `logoPadding` to specify optional padding around the logo.
+- Added new optional prop `logoPaddingStyle` to specify the shape of the logo padding (rectangular with 'square' or elliptic with 'circle').
+
+### Changes 
+- Prop `removeQrCodeBehindLogo` does not have a default padding anymore, but has the same size as the logo.
+
 ## [v2.8.0]
@@ -4,0 +12,0 @@ ### Features

dist/index.d.ts

@@ -24,3 +24,6 @@ import * as React from 'react';
     logoOpacity?: number;
+    logoOnLoad?: () => void;
     removeQrCodeBehindLogo?: boolean;
+    logoPadding?: number;
+    logoPaddingStyle?: 'square' | 'circle';
     eyeRadius?: CornerRadii | [CornerRadii, CornerRadii, CornerRadii];
@@ -27,0 +30,0 @@ eyeColor?: EyeColor | [EyeColor, EyeColor, EyeColor];

dist/index.js

@@ -163,3 +163,9 @@ "use strict";
     QRCode.prototype.update = function () {
-        var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, enableCORS = _a.enableCORS, size = _a.size, quietZone = _a.quietZone, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoWidth = _a.logoWidth, logoHeight = _a.logoHeight, logoOpacity = _a.logoOpacity, removeQrCodeBehindLogo = _a.removeQrCodeBehindLogo, qrStyle = _a.qrStyle, eyeRadius = _a.eyeRadius, eyeColor = _a.eyeColor;
+        var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, enableCORS = _a.enableCORS, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoOpacity = _a.logoOpacity, logoOnLoad = _a.logoOnLoad, removeQrCodeBehindLogo = _a.removeQrCodeBehindLogo, qrStyle = _a.qrStyle, eyeRadius = _a.eyeRadius, eyeColor = _a.eyeColor, logoPaddingStyle = _a.logoPaddingStyle;
+        // just make sure that these params are passed as numbers
+        var size = +this.props.size;
+        var quietZone = +this.props.quietZone;
+        var logoWidth = this.props.logoWidth ? +this.props.logoWidth : 0;
+        var logoHeight = this.props.logoHeight ? +this.props.logoHeight : 0;
+        var logoPadding = this.props.logoPadding ? +this.props.logoPadding : 0;
         var qrCode = qrGenerator(0, ecLevel);
@@ -170,3 +176,3 @@ qrCode.addData(QRCode.utf16to8(value));
         var ctx = canvas.getContext('2d');
-        var canvasSize = +size + (2 * +quietZone);
+        var canvasSize = size + (2 * quietZone);
         var length = qrCode.getModuleCount();
@@ -179,7 +185,3 @@ var cellSize = size / length;
         ctx.fillRect(0, 0, canvasSize, canvasSize);
-        var offset = +quietZone;
-        var dWidthLogo = logoWidth || size * 0.2;
-        var dHeightLogo = logoHeight || dWidthLogo;
-        var dxLogo = ((size - dWidthLogo) / 2);
-        var dyLogo = ((size - dHeightLogo) / 2);
+        var offset = quietZone;
         var positioningZones = [
@@ -196,3 +198,3 @@ { row: 0, col: 0 },
                 for (var col = 0; col < length; col++) {
-                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones) && !(removeQrCodeBehindLogo && this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
+                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones)) {
                         ctx.beginPath();
@@ -209,3 +211,3 @@ ctx.arc(Math.round(col * cellSize) + radius + offset, Math.round(row * cellSize) + radius + offset, (radius / 100) * 75, 0, 2 * Math.PI, false);
                 for (var col = 0; col < length; col++) {
-                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones) && !(removeQrCodeBehindLogo && this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
+                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones)) {
                         ctx.fillStyle = fgColor;
@@ -250,5 +252,31 @@ var w = (Math.ceil((col + 1) * cellSize) - Math.floor(col * cellSize));
                 ctx.save();
+                var dWidthLogo = logoWidth || size * 0.2;
+                var dHeightLogo = logoHeight || dWidthLogo;
+                var dxLogo = ((size - dWidthLogo) / 2);
+                var dyLogo = ((size - dHeightLogo) / 2);
+                if (removeQrCodeBehindLogo || logoPadding) {
+                    ctx.beginPath();
+                    ctx.strokeStyle = bgColor;
+                    ctx.fillStyle = bgColor;
+                    var dWidthLogoPadding = dWidthLogo + (2 * logoPadding);
+                    var dHeightLogoPadding = dHeightLogo + (2 * logoPadding);
+                    var dxLogoPadding = dxLogo + offset - logoPadding;
+                    var dyLogoPadding = dyLogo + offset - logoPadding;
+                    if (logoPaddingStyle === 'circle') {
+                        var dxCenterLogoPadding = dxLogoPadding + (dWidthLogoPadding / 2);
+                        var dyCenterLogoPadding = dyLogoPadding + (dHeightLogoPadding / 2);
+                        ctx.ellipse(dxCenterLogoPadding, dyCenterLogoPadding, dWidthLogoPadding / 2, dHeightLogoPadding / 2, 0, 0, 2 * Math.PI);
+                        ctx.stroke();
+                        ctx.fill();
+                    }
+                    else {
+                        ctx.fillRect(dxLogoPadding, dyLogoPadding, dWidthLogoPadding, dHeightLogoPadding);
+                    }
+                }
                 ctx.globalAlpha = logoOpacity;
                 ctx.drawImage(image_1, dxLogo + offset, dyLogo + offset, dWidthLogo, dHeightLogo);
                 ctx.restore();
+                if (logoOnLoad) {
+                    logoOnLoad();
+                }
             };
@@ -260,8 +288,8 @@ image_1.src = logoImage;
         var _a;
-        var size = +this.props.size + (2 * +this.props.quietZone);
+        var qrSize = +this.props.size + (2 * +this.props.quietZone);
         return React.createElement('canvas', {
             id: (_a = this.props.id) !== null && _a !== void 0 ? _a : 'react-qrcode-logo',
-            height: size,
-            width: size,
-            style: { height: size + 'px', width: size + 'px' },
+            height: qrSize,
+            width: qrSize,
+            style: { height: qrSize + 'px', width: qrSize + 'px' },
             ref: this.canvas
@@ -279,5 +307,5 @@ });
         logoOpacity: 1,
-        removeQrCodeBehindLogo: false,
         qrStyle: 'squares',
-        eyeRadius: [0, 0, 0]
+        eyeRadius: [0, 0, 0],
+        logoPaddingStyle: 'square'
     };
@@ -284,0 +312,0 @@ return QRCode;

package.json

 {
   "name": "react-qrcode-logo",
-  "version": "2.8.0",
+  "version": "2.9.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

@@ -28,20 +28,23 @@ # react-qrcode-logo
 ## Props
-| Prop        | Type                                  | Default value        | Description    |
-| ------------|---------------------------------------| ---------------------|-----|
-| `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 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 |
-| `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 |
-| `removeQrCodeBehindLogo`         | `boolean`                 |   `false`              | Removes points behind the logo and adds a border with no points around the logo  |
-| `qrStyle` | `squares` &#124; `dots` | `squares`  | Style of the QR Code modules |
-| `eyeRadius` | `CornerRadii` &#124; `CornerRadii[]` |  | The corner radius for the positional patterns (the three "eyes" around the QR code). [See more details here](res/eyeRadius_doc.md) |
-| `eyeColor` | `EyeColor` &#124; `EyeColor[]` |  | The color for the positional patterns (the three "eyes" around the QR code). [See more details here](res/eyeColor_doc.md) |
-| `id` | `string` | `react-qrcode-logo` | Optional custom id for the QRCode canvas. You can use this prop if you have multiple QRCodes and need to differentiate them |
+| Prop                     | Type                                | Default value       | Description                                                                                                                        |
+|--------------------------|-------------------------------------| --------------------|------------------------------------------------------------------------------------------------------------------------------------|
+| `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` &#124; `M` &#124; `Q` &#124; `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 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                                                                                                                   |
+| `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  |
+| `logoOnLoad`             | `() => void`                        |                     | Callback function to know when the logo in the QR Code is loaded                                                                     |
+| `removeQrCodeBehindLogo` | `boolean`                           |   `false`           | Removes points behind the logo. If no logoPadding is specified, the removed part will have the same size as the logo                                                    |
+| `logoPadding`            | `number`                            |                     | Adds a border with no points around the logo. When > 0, the padding will be visible even if the prop removeQrCodeBehindLogo is not set to true                                                    |
+| `logoPaddingStyle`            | `square` &#124; `circle`        | `square`     | Sets the shape of the padding area around the logo                                                     |
+| `qrStyle`                | `squares` &#124; `dots`             | `squares`  | Style of the QR Code modules                                                                                                       |
+| `eyeRadius`              | `CornerRadii` &#124; `CornerRadii[]` |  | The corner radius for the positional patterns (the three "eyes" around the QR code). [See more details here](res/eyeRadius_doc.md) |
+| `eyeColor`               | `EyeColor` &#124; `EyeColor[]`      |  | The color for the positional patterns (the three "eyes" around the QR code). [See more details here](res/eyeColor_doc.md)          |
+| `id`                     | `string`                            | `react-qrcode-logo` | Optional custom id for the QRCode canvas. You can use this prop if you have multiple QRCodes and need to differentiate them        |
 
@@ -61,32 +64,31 @@ ## Usage example
 			<a href="https://github.com/gcoro">
-			<img src="https://avatars.githubusercontent.com/u/37499369?v=4" width="100px;" alt="gcoro" /><br />
+			<img src="https://avatars.githubusercontent.com/u/37499369?v=4" width="60px;" alt="gcoro" /><br />
 			<sup><b>gcoro</b></sup></a><br />
 			</td><td align="center" valign="top">
 			<a href="https://github.com/jgillick">
-			<img src="https://avatars.githubusercontent.com/u/35894?v=4" width="100px;" alt="jgillick" /><br />
+			<img src="https://avatars.githubusercontent.com/u/35894?v=4" width="60px;" alt="jgillick" /><br />
 			<sup><b>jgillick</b></sup></a><br />
 			</td><td align="center" valign="top">
-			<a href="https://github.com/JChord">
-			<img src="https://avatars.githubusercontent.com/u/981214?v=4" width="100px;" alt="JChord" /><br />
-			<sup><b>JChord</b></sup></a><br />
+			<a href="https://github.com/dos1in">
+			<img src="https://avatars.githubusercontent.com/u/981214?v=4" width="60px;" alt="dos1in" /><br />
+			<sup><b>dos1in</b></sup></a><br />
 			</td><td align="center" valign="top">
 			<a href="https://github.com/halitogunc">
-			<img src="https://avatars.githubusercontent.com/u/13641726?v=4" width="100px;" alt="halitogunc" /><br />
+			<img src="https://avatars.githubusercontent.com/u/13641726?v=4" width="60px;" alt="halitogunc" /><br />
 			<sup><b>halitogunc</b></sup></a><br />
 			</td><td align="center" valign="top">
-			<a href="https://github.com/mushang11">
-			<img src="https://avatars.githubusercontent.com/u/13930277?v=4" width="100px;" alt="mushang11" /><br />
-			<sup><b>mushang11</b></sup></a><br />
+			<a href="https://github.com/qwei-1874">
+			<img src="https://avatars.githubusercontent.com/u/13930277?v=4" width="60px;" alt="qwei-1874" /><br />
+			<sup><b>qwei-1874</b></sup></a><br />
 			</td><td align="center" valign="top">
 			<a href="https://github.com/Trexy94">
-			<img src="https://avatars.githubusercontent.com/u/16225761?v=4" width="100px;" alt="Trexy94" /><br />
+			<img src="https://avatars.githubusercontent.com/u/16225761?v=4" width="60px;" alt="Trexy94" /><br />
 			<sup><b>Trexy94</b></sup></a><br />
 			</td><td align="center" valign="top">
 			<a href="https://github.com/ty-everett">
-			<img src="https://avatars.githubusercontent.com/u/23272461?v=4" width="100px;" alt="ty-everett" /><br />
+			<img src="https://avatars.githubusercontent.com/u/23272461?v=4" width="60px;" alt="ty-everett" /><br />
 			<sup><b>ty-everett</b></sup></a><br />
-			</td><tr/>
-<tr><td align="center" valign="top">
+			</td><td align="center" valign="top">
 			<a href="https://github.com/larstel">
-			<img src="https://avatars.githubusercontent.com/u/45731552?v=4" width="100px;" alt="larstel" /><br />
+			<img src="https://avatars.githubusercontent.com/u/45731552?v=4" width="60px;" alt="larstel" /><br />
 			<sup><b>larstel</b></sup></a><br />
@@ -93,0 +95,0 @@ </td></tr>

res/eyeColor_doc.md

@@ -0,0 +0,0 @@ ### About eyeColor

res/eyeRadius_doc.md

@@ -0,0 +0,0 @@ ### About eyeRadius

tsconfig.json

@@ -0,0 +0,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

238051

increased by1.92%

Lines of code

727

increased by8.83%

Number of lines in readme file

98

increased by2.08%

Worsened metrics

Published versions last months

0

decreased by-100%

No dependency changes