react-qrcode-logo - npm Package Compare versions

Comparing version 2.10.0 to 3.0.0

CHANGELOG.md

 # Changelog
 
+## [v3.0.0]
+
+### Fixes
+
+- Removed use of `ReactDOM.findDOMNode`, which has been deprecated in React 18, and removed in React 19.
+
+### Features
+
+- Added `download` function to save the QRCode as image.
+- Added optional `style` prop to pass CSS to the canvas.
+- `logoOnLoad` callback now also returns the event details.
+
 ## [v2.10.0]
+
 ### Features
+
 - Added new `qrStyle`: `fluid`.
 
 ## [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 
+### Changes
+
 - Prop `removeQrCodeBehindLogo` does not have a default padding anymore, but has the same size as the logo.
 
 ## [v2.8.0]
+
 ### Features
+
 - Added new optional prop `eyeColor` to specify different colors for the positional patterns.
 
 ## [v2.7.0]
+
 ### Features
+
 - Added optional prop `removeQrCodeBehindLogo`, if set to true will draw an empty square around the logo.
 
 ## [v2.6.0]
+
 ### Features
+
 - Added optional prop `id` to specify the id of the canvas element.
 
 ## [v2.5.0]
+
 ### Features
+
 - Added new optional prop `eyeRadius` to specify the corner radius for the positional patterns.
 
 ## [v2.2.1]
+
 ### Fixes
+
 - Changed `quietZone` implementation so that it's included directly in the canvas, instead of just an HTML padding. This fixes the issue that caused the QR Code to appear without the quiet zone when it got saved.
 
 ## [v2.2.0]
+
 ### Features
+
 - Added new optional prop `qrStyle` ('squares' | 'dots'), to specify a different pattern for the QR Code main part.
 
 ### Changes
+
 - Changed the prop name `padding` to `quietZone`, for a clearer naming. The purpose of this prop is to define the width of the quiet zone around the QR Code, which a part of the QR Code needed by the scanner to distinguish the QRCode from the surroundings.
@@ -44,17 +74,25 @@ - Removed prop `style`.
 ### Fixes
+
 - Fixed padding/quietZone value which was applied in percentage, and leaded to incorrect values sometimes.
 
 ## [v2.1.0]
+
 ### Features
+
 - Made CORS optional, by adding a new prop `enableCORS`.
 
 ## [v2.0.1]
+
 ### Fixes
+
 - Enabled CORS for logo image.
 
 ## [v2.0.0]
+
 ### Refactor
+
 - Replaced the package used to implement the QRCode, from `qr.js` to `qrcode-generator`.
 
-## [v1.0.0] 
+## [v1.0.0]
+
 - First version.

dist/index.d.ts

 import * as React from 'react';
-declare type EyeColor = string | InnerOuterEyeColor;
-declare type InnerOuterEyeColor = {
+type EyeColor = string | InnerOuterEyeColor;
+type InnerOuterEyeColor = {
     inner: string;
     outer: string;
 };
-declare type CornerRadii = number | [number, number, number, number] | InnerOuterRadii;
-declare type InnerOuterRadii = {
+type CornerRadii = number | [number, number, number, number] | InnerOuterRadii;
+type InnerOuterRadii = {
     inner: number | [number, number, number, number];
@@ -24,3 +24,3 @@ outer: number | [number, number, number, number];
     logoOpacity?: number;
-    logoOnLoad?: () => void;
+    logoOnLoad?: (e: Event) => void;
     removeQrCodeBehindLogo?: boolean;
@@ -32,9 +32,10 @@ logoPadding?: number;
     qrStyle?: 'squares' | 'dots' | 'fluid';
-    style?: object;
+    style?: React.CSSProperties;
     id?: string;
 }
 export declare class QRCode extends React.Component<IProps, {}> {
-    private canvas;
+    private canvasRef;
     static defaultProps: IProps;
-    private static utf16to8;
+    download(fileType?: 'png' | 'jpg' | 'webp', fileName?: string): void;
+    private utf16to8;
     /**
@@ -59,13 +60,4 @@ * Draw a rounded square in the canvas
     update(): void;
-    render(): React.DetailedReactHTMLElement<{
-        id: string;
-        height: number;
-        width: number;
-        style: {
-            height: string;
-            width: string;
-        };
-        ref: React.RefObject<HTMLCanvasElement>;
-    }, HTMLCanvasElement>;
+    render(): React.JSX.Element;
 }
 export {};

dist/index.js

@@ -6,6 +6,8 @@ "use strict";
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -16,2 +18,13 @@ function __() { this.constructor = d; }
 })();
+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 });
@@ -22,3 +35,2 @@ exports.QRCode = void 0;
 var React = require("react");
-var ReactDOM = require("react-dom");
 var QRCode = /** @class */ (function (_super) {
@@ -28,6 +40,28 @@ __extends(QRCode, _super);
         var _this = _super.call(this, props) || this;
-        _this.canvas = React.createRef();
+        _this.canvasRef = React.createRef();
         return _this;
     }
-    QRCode.utf16to8 = function (str) {
+    QRCode.prototype.download = function (fileType, fileName) {
+        if (this.canvasRef.current) {
+            var mimeType = void 0;
+            switch (fileType) {
+                case 'jpg':
+                    mimeType = 'image/jpeg';
+                    break;
+                case 'webp':
+                    mimeType = 'image/webp';
+                    break;
+                case 'png':
+                default:
+                    mimeType = 'image/png';
+                    break;
+            }
+            var url = this.canvasRef.current.toDataURL(mimeType, 1.0);
+            var link = document.createElement('a');
+            link.download = fileName !== null && fileName !== void 0 ? fileName : 'react-qrcode-logo';
+            link.href = url;
+            link.click();
+        }
+    };
+    QRCode.prototype.utf16to8 = function (str) {
         var out = '', i, c;
@@ -167,3 +201,4 @@ var len = str.length;
     QRCode.prototype.update = function () {
-        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;
+        var _a;
+        var _b = this.props, value = _b.value, ecLevel = _b.ecLevel, enableCORS = _b.enableCORS, bgColor = _b.bgColor, fgColor = _b.fgColor, logoImage = _b.logoImage, logoOpacity = _b.logoOpacity, logoOnLoad = _b.logoOnLoad, removeQrCodeBehindLogo = _b.removeQrCodeBehindLogo, qrStyle = _b.qrStyle, eyeRadius = _b.eyeRadius, eyeColor = _b.eyeColor, logoPaddingStyle = _b.logoPaddingStyle;
         // just make sure that these params are passed as numbers
@@ -176,5 +211,5 @@ var size = +this.props.size;
         var qrCode = qrGenerator(0, ecLevel);
-        qrCode.addData(QRCode.utf16to8(value));
+        qrCode.addData(this.utf16to8(value));
         qrCode.make();
-        var canvas = ReactDOM.findDOMNode(this.canvas.current);
+        var canvas = (_a = this.canvasRef) === null || _a === void 0 ? void 0 : _a.current;
         var ctx = canvas.getContext('2d');
@@ -257,3 +292,3 @@ var canvasSize = size + (2 * quietZone);
         for (var i = 0; i < 3; i++) {
-            var _b = positioningZones[i], row = _b.row, col = _b.col;
+            var _c = positioningZones[i], row = _c.row, col = _c.col;
             var radii = eyeRadius;
@@ -285,3 +320,3 @@ var color = void 0;
             }
-            image_1.onload = function () {
+            image_1.onload = function (e) {
                 ctx.save();
@@ -315,3 +350,3 @@ var dWidthLogo = logoWidth || size * 0.2;
                 if (logoOnLoad) {
-                    logoOnLoad();
+                    logoOnLoad(e);
                 }
@@ -325,9 +360,3 @@ };
         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: qrSize,
-            width: qrSize,
-            style: { height: qrSize + 'px', width: qrSize + 'px' },
-            ref: this.canvas
-        });
+        return React.createElement("canvas", { id: (_a = this.props.id) !== null && _a !== void 0 ? _a : 'react-qrcode-logo', height: qrSize, width: qrSize, style: __assign({ height: qrSize + 'px', width: qrSize + 'px' }, this.props.style), ref: this.canvasRef });
     };
@@ -334,0 +363,0 @@ QRCode.defaultProps = {

package.json

 {
   "name": "react-qrcode-logo",
-  "version": "2.10.0",
+  "version": "3.0.0",
   "description": "React component to generate a QR Code customizable with logo and more properties",
@@ -31,16 +31,16 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@types/react": "^16.4.7",
-    "@types/react-dom": "^16.0.6",
-    "typescript": "^3.0.1",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.4.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
     "lodash.isequal": "^4.5.0",
-    "qrcode-generator": "^1.4.1"
+    "qrcode-generator": "^1.4.4"
   },
   "peerDependencies": {
-    "react": ">=16.4.1",
-    "react-dom": ">=16.4.1"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   }
 }

README.md

 # react-qrcode-logo
+
 Typescript React component to generate a customizable QR Code.
 
 <div style="display: flex; flex-direction: row;">
-	<img src="res/qrcode-react.png" height="256" width="256">
-	<img src="res/qrcode-mikuv3.png" height="256" width="256">
-	<img src="res/qrcode-ts-fluid.png" height="256" width="256">
+ <img src="res/qrcode-react.png" height="256" width="256">
+ <img src="res/qrcode-mikuv3.png" height="256" width="256">
+ <img src="res/qrcode-ts-fluid.png" height="256" width="256">
 </div>
@@ -15,17 +16,22 @@
 ```
+
 ## Usage
 
 ```javascript
-import * as React from 'react';
+// import
 import { QRCode } from 'react-qrcode-logo';
 
-React.render(
-  <QRCode value="https://github.com/gcoro/react-qrcode-logo" />,
-  mountNode
-);
+// usage
+<QRCode value="https://github.com/gcoro/react-qrcode-logo" />
+
 ```
 
+## Compatibility
+
+If you are using a React version >= 18, use react-qrcode-logo version >= 3.0.0
+
 ## Props
-| Prop                     | Type                                | Default value       | Description                                                                                                                        |
-|--------------------------|-------------------------------------| --------------------|------------------------------------------------------------------------------------------------------------------------------------|
+
+| 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                                         |
@@ -42,3 +48,2 @@ | `ecLevel`                | `L` &#124; `M` &#124; `Q` &#124; `H` |   `M`              | The error correction level of the QR Code                                                                                          |
 | `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                                                    |
@@ -51,9 +56,26 @@ | `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                                                    |
 | `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        |
+| `style`       | `React.CSSProperties` |  | CSS style properties that will be applied to the canvas component |
 
-## Usage example
-You can find a very simple demo project [here](https://github.com/gcoro/QRCodeCustomizer).
+## Events
 
+| Event Name                     | Returns                                | Description                                                                                                                      |
+|--------------------------|-------------------------------------| ----------------------------------------------------------------------------------------------------------------------------------|
+| `logoOnLoad`                    | `event: Event`                            | Event that fires when the QR Code logo image has been loaded                                         |
+
+## Methods
+
+Methods must be called on a valid QRCode ref - [learn more](https://react.dev/learn/manipulating-the-dom-with-refs). 
+
+| Method Name                     | Arguments                                | Description                                                                                                                      |
+|--------------------------|-------------------------------------| ----------------------------------------------------------------------------------------------------------------------------------|
+| `download`                  | `fileType?`: `'png'` &#124; `'jpg'` &#124; `'webp'`, `fileName?: string`                            | This function will download the QR Code as image. Format and file name can be specified                                         |
+
+## Example
+
+You can find a demo project [here](https://github.com/gcoro/QRCodeCustomizer).
+
 ## Contributing
+
 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). 
+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).
@@ -63,47 +85,4 @@
 
-<table>
-<tr><td align="center" valign="top">
-			<a href="https://github.com/gcoro">
-			<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="60px;" alt="jgillick" /><br />
-			<sup><b>jgillick</b></sup></a><br />
-			</td><td align="center" valign="top">
-			<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="60px;" alt="halitogunc" /><br />
-			<sup><b>halitogunc</b></sup></a><br />
-			</td><td align="center" valign="top">
-			<a href="https://github.com/joellord">
-			<img src="https://avatars.githubusercontent.com/u/1615433?v=4" width="60px;" alt="joellord" /><br />
-			<sup><b>joellord</b></sup></a><br />
-			</td><td align="center" valign="top">
-			<a href="https://github.com/Michael-AT-Corporation">
-			<img src="https://avatars.githubusercontent.com/u/77804353?v=4" width="60px;" alt="Michael-AT-Corporation" /><br />
-			<sup><b>Michael-AT-Corporation</b></sup></a><br />
-			</td><td align="center" valign="top">
-			<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="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="60px;" alt="ty-everett" /><br />
-			<sup><b>ty-everett</b></sup></a><br />
-			</td><td align="center" valign="top">
-			<a href="https://github.com/larstel">
-			<img src="https://avatars.githubusercontent.com/u/45731552?v=4" width="60px;" alt="larstel" /><br />
-			<sup><b>larstel</b></sup></a><br />
-			</td></tr>
-</table>
+## More credits
 
-## More 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).

tsconfig.json

 {
   "compilerOptions": {
-    "target": "es5",          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "commonjs",     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "declaration": true,      /* Generates corresponding '.d.ts' file. */
-    "outDir": "./dist",       /* Redirect output structure to the directory. */
-	"lib": ["es2015", "es2017", "dom"]
+    "jsx": "react",
+    "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "declaration": true, /* Generates corresponding '.d.ts' file. */
+    "outDir": "./dist", /* Redirect output structure to the directory. */
+    "lib": [
+      "es2015",
+      "es2017",
+      "dom"
+    ]
   }
 }

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

336926

increased by0.34%

Lines of code

833

increased by5.44%

Worsened metrics

Number of lines in readme file

85

decreased by-19.81%

Dependency changes

• Updatedqrcode-generator@^1.4.4