react-qrcode-logo - npm Package Compare versions

Comparing version 2.7.0 to 2.8.0

CHANGELOG.md

 # Changelog
 
+## [v2.8.0]
+### Features
+- Added new optional prop `eyeColor` to specify different colors for the positional patterns.
+
 ## [v2.7.0]
@@ -4,0 +8,0 @@ ### Features

dist/index.d.ts

 import * as React from 'react';
-declare type CornerRadii = number | number[] | InnerOuterRadii;
+declare type EyeColor = string | InnerOuterEyeColor;
+declare type InnerOuterEyeColor = {
+    inner: string;
+    outer: string;
+};
+declare type CornerRadii = number | [number, number, number, number] | InnerOuterRadii;
 declare type InnerOuterRadii = {
-    inner: number | number[];
-    outer: number | number[];
+    inner: number | [number, number, number, number];
+    outer: number | [number, number, number, number];
 };
@@ -20,3 +25,4 @@ export interface IProps {
     removeQrCodeBehindLogo?: boolean;
-    eyeRadius?: CornerRadii | CornerRadii[];
+    eyeRadius?: CornerRadii | [CornerRadii, CornerRadii, CornerRadii];
+    eyeColor?: EyeColor | [EyeColor, EyeColor, EyeColor];
     qrStyle?: 'squares' | 'dots';
@@ -23,0 +29,0 @@ style?: object;

dist/index.js

@@ -51,4 +51,6 @@ "use strict";
      */
-    QRCode.prototype.drawRoundedSquare = function (lineWidth, x, y, size, radii, fill, ctx) {
+    QRCode.prototype.drawRoundedSquare = function (lineWidth, x, y, size, color, radii, fill, ctx) {
         ctx.lineWidth = lineWidth;
+        ctx.fillStyle = color;
+        ctx.strokeStyle = color;
         // Adjust coordinates so that the outside of the stroke is aligned to the edges
@@ -93,3 +95,3 @@ y += lineWidth / 2;
      */
-    QRCode.prototype.drawPositioningPattern = function (ctx, cellSize, offset, row, col, radii) {
+    QRCode.prototype.drawPositioningPattern = function (ctx, cellSize, offset, row, col, color, radii) {
         if (radii === void 0) { radii = [0, 0, 0, 0]; }
@@ -107,2 +109,12 @@ var lineWidth = Math.ceil(cellSize);
         }
+        var colorOuter;
+        var colorInner;
+        if (typeof color !== 'string') {
+            colorOuter = color.outer;
+            colorInner = color.inner;
+        }
+        else {
+            colorOuter = color;
+            colorInner = color;
+        }
         var y = (row * cellSize) + offset;
@@ -112,3 +124,3 @@ var x = (col * cellSize) + offset;
         // Outer box
-        this.drawRoundedSquare(lineWidth, x, y, size, radiiOuter, false, ctx);
+        this.drawRoundedSquare(lineWidth, x, y, size, colorOuter, radiiOuter, false, ctx);
         // Inner box
@@ -118,3 +130,3 @@ size = cellSize * 3;
         x += cellSize * 2;
-        this.drawRoundedSquare(lineWidth, x, y, size, radiiInner, true, ctx);
+        this.drawRoundedSquare(lineWidth, x, y, size, colorInner, radiiInner, true, ctx);
     };
@@ -156,3 +168,3 @@ ;
     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;
+        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 qrCode = qrGenerator(0, ecLevel);
@@ -212,2 +224,3 @@ qrCode.addData(QRCode.utf16to8(value));
             var radii = eyeRadius;
+            var color = void 0;
             if (Array.isArray(radii)) {
@@ -219,3 +232,14 @@ radii = radii[i];
             }
-            this.drawPositioningPattern(ctx, cellSize, offset, row, col, radii);
+            if (!eyeColor) { // if not specified, eye color is the same as foreground, 
+                color = fgColor;
+            }
+            else {
+                if (Array.isArray(eyeColor)) { // if array, we pass the single color
+                    color = eyeColor[i];
+                }
+                else {
+                    color = eyeColor;
+                }
+            }
+            this.drawPositioningPattern(ctx, cellSize, offset, row, col, color, radii);
         }
@@ -258,3 +282,3 @@ if (logoImage) {
         qrStyle: 'squares',
-        eyeRadius: [],
+        eyeRadius: [0, 0, 0]
     };
@@ -261,0 +285,0 @@ return QRCode;

package.json

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

@@ -6,3 +6,3 @@ # react-qrcode-logo
 	<img src="res/qrcode-react.png" height="256" width="256">
-	<img src="res/qrcode-miku.png" height="256" width="256">
+	<img src="res/qrcode-mikuv3.png" height="256" width="256">
 	<img src="res/qrcode-ts.png" height="256" width="256">
@@ -44,50 +44,6 @@ </div>
 | `qrStyle` | `squares` &#124; `dots` | `squares`  | Style of the QR Code modules |
-| `eyeRadius` | `number` &#124; `number[]` &#124; `number[][]` |  | The corner radius for the positional patterns (the three "eyes" around the QR code). See more details below |
+| `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 |
 
-### About eyeRadius
-
-Give the positional pattern custom radii. You can either set one radius for all corners or all positional eyes, or
-specify a radius for each corner of each eye.
-
-Simple example:
-```jsx
-<QRCode
-	value="https://github.com/gcoro/react-qrcode-logo"
-	eyeRadius={5} // 5 pixel radius for all corners of all positional eyes
-/>
-```
-
-Other examples:
-
-```jsx
-// Radius for each eye
-eyeRadius={[
-	5,  // top/left eye
-	10, // top/right eye
-	5,  // bottom/left eye
-]}
-```
-
-```jsx
-// Radius for each corner (array is: top/left, top/right, bottom/right, bottom/left)
-eyeRadius={[
-	[10, 10, 0, 10], // top/left eye
-	[10, 10, 10, 0], // top/right eye
-	[10, 0, 10, 10], // bottom/left
-]}
-```
-
-```jsx
-// Include radius for the inner eye of the top/left eye
-eyeRadius={[
-	{ // top/left eye
-		outer: [10, 10, 0, 10],
-		inner: [0, 10, 10, 10],
-	},
-	[10, 10, 10, 0], // top/right eye
-	[10, 0, 10, 10], // bottom/left
-]}
-```
-
 ## Usage example
@@ -97,4 +53,8 @@ You can find a very simple demo project [here](https://github.com/gcoro/QRCodeCustomizer).
 ## Contributing
-Thanks to everyone who contributed :) PRs and suggestions are welcome.
+PRs and suggestions are welcome.
+When making a pull request, please explain in a clear way the changes you made and why you are making them (+ if you can also update the README accordingly, ty <3). 
+Also try keep the current repo codestyle (eg. do not reformat all the code with prettier).
 
+Thanks to everyone who contributed and/or will contribute :)
+
 <table>
@@ -129,2 +89,7 @@ <tr><td align="center" valign="top">
 			<sup><b>ty-everett</b></sup></a><br />
+			</td><tr/>
+<tr><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 />
+			<sup><b>larstel</b></sup></a><br />
 			</td></tr>
@@ -131,0 +96,0 @@ </table>

tsconfig.json

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

No alert changes

Improved metrics

Total package byte prevSize

233564

increased by41.47%

Number of package files

14

increased by16.67%

Lines of code

668

increased by12.27%

Worsened metrics

Number of lines in readme file

96

decreased by-26.72%

No dependency changes