next-qrcode - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

dist/next-qrcode.es.js

@@ -1,1 +0,1 @@
-import n from"react";var o=require("qrcode");function t(){var t=function(t){var i=t.text,r=t.options,e=t.logo,u=n.useRef(null);return n.useEffect((function(){var n,t,l,v,a,d,c;if(u&&u.current&&(o.toCanvas(u.current,i,r,(function(n){if(n)throw n})),e)){var f=u.current.getContext("2d");if(f){var s=new Image;s.src=e.src;var m=(null===(n=null==e?void 0:e.options)||void 0===n?void 0:n.width)||30;if((null===(t=null==e?void 0:e.options)||void 0===t?void 0:t.x)&&(null===(l=null==e?void 0:e.options)||void 0===l?void 0:l.y)){var p=null===(v=null==e?void 0:e.options)||void 0===v?void 0:v.x,g=null===(a=null==e?void 0:e.options)||void 0===a?void 0:a.y;s.onload=function(){f.drawImage(s,p,g,m,m)}}else if(!(null===(d=null==e?void 0:e.options)||void 0===d?void 0:d.x)||!(null===(c=null==e?void 0:e.options)||void 0===c?void 0:c.y)){var w=null==r?void 0:r.margin;w=w?8*w:0===w?0:32;var x=(((null==r?void 0:r.width)||116+w)-m)/2;s.onload=function(){f.drawImage(s,x,x,m,m)}}}}}),[u,i,r,e]),n.createElement("canvas",{ref:u})};return n.useMemo((function(){return t}),[])}function i(){var i;return{Image:(i=function(t){var i=t.text,r=t.options,e=n.useRef(null);return n.useEffect((function(){e&&e.current&&o.toDataURL(i,r,(function(n,o){if(n)throw n;e.current instanceof HTMLImageElement&&(e.current.src=o)}))}),[i,r,e]),n.createElement("img",{ref:e})},n.useMemo((function(){return i}),[])),Canvas:t()}}export{i as useQRCode};
+import n from"react";var o=require("qrcode");function t(){var t=function(t){var e=t.text,r=t.options,i=t.logo,u=n.useRef(null);return n.useEffect((function(){var n,t,l,v,c,f,a;if(u&&u.current&&(o.toCanvas(u.current,e,r,(function(n){if(n)throw n})),i)){var d=u.current.getContext("2d");if(d){var s=new Image;s.src=i.src;var m=(null===(n=null==i?void 0:i.options)||void 0===n?void 0:n.width)||30;if((null===(t=null==i?void 0:i.options)||void 0===t?void 0:t.x)&&(null===(l=null==i?void 0:i.options)||void 0===l?void 0:l.y)){var p=null===(v=null==i?void 0:i.options)||void 0===v?void 0:v.x,g=null===(c=null==i?void 0:i.options)||void 0===c?void 0:c.y;s.onload=function(){d.drawImage(s,p,g,m,m)}}else if(!(null===(f=null==i?void 0:i.options)||void 0===f?void 0:f.x)||!(null===(a=null==i?void 0:i.options)||void 0===a?void 0:a.y)){var w=null==r?void 0:r.margin;w=w?8*w:0===w?0:32;var x=(((null==r?void 0:r.width)||116+w)-m)/2;s.onload=function(){d.drawImage(s,x,x,m,m)}}}}}),[u,e,r,i]),n.createElement("canvas",{ref:u})};return n.useMemo((function(){return t}),[])}function e(){var e,r;return{Image:(e=function(t){var e=t.text,r=t.options,i=n.useRef(null);return n.useEffect((function(){i&&i.current&&o.toDataURL(e,r,(function(n,o){if(n)throw n;i.current instanceof HTMLImageElement&&(i.current.src=o)}))}),[e,r,i]),n.createElement("img",{ref:i})},n.useMemo((function(){return e}),[])),Canvas:t(),SVG:(r=function(t){var e=t.text,r=t.options,i=n.useRef(null);return n.useEffect((function(){o.toString(e,r,(function(n,o){if(n)throw n;i.current instanceof HTMLDivElement&&(i.current.innerHTML=o)}))}),[e,r]),n.createElement("div",{ref:i})},n.useMemo((function(){return r}),[]))}}export{e as useQRCode};

dist/next-qrcode.js

@@ -1,1 +0,1 @@
-"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}Object.defineProperty(exports,"__esModule",{value:!0});var e=n(require("react")),o=require("qrcode");function t(){var n=function(n){var t=n.text,u=n.options,i=n.logo,r=e.default.useRef(null);return e.default.useEffect((function(){var n,e,l,a,d,f,v;if(r&&r.current&&(o.toCanvas(r.current,t,u,(function(n){if(n)throw n})),i)){var c=r.current.getContext("2d");if(c){var s=new Image;s.src=i.src;var p=(null===(n=null==i?void 0:i.options)||void 0===n?void 0:n.width)||30;if((null===(e=null==i?void 0:i.options)||void 0===e?void 0:e.x)&&(null===(l=null==i?void 0:i.options)||void 0===l?void 0:l.y)){var m=null===(a=null==i?void 0:i.options)||void 0===a?void 0:a.x,g=null===(d=null==i?void 0:i.options)||void 0===d?void 0:d.y;s.onload=function(){c.drawImage(s,m,g,p,p)}}else if(!(null===(f=null==i?void 0:i.options)||void 0===f?void 0:f.x)||!(null===(v=null==i?void 0:i.options)||void 0===v?void 0:v.y)){var x=null==u?void 0:u.margin;x=x?8*x:0===x?0:32;var w=(((null==u?void 0:u.width)||116+x)-p)/2;s.onload=function(){c.drawImage(s,w,w,p,p)}}}}}),[r,t,u,i]),e.default.createElement("canvas",{ref:r})};return e.default.useMemo((function(){return n}),[])}exports.useQRCode=function(){var n;return{Image:(n=function(n){var t=n.text,u=n.options,i=e.default.useRef(null);return e.default.useEffect((function(){i&&i.current&&o.toDataURL(t,u,(function(n,e){if(n)throw n;i.current instanceof HTMLImageElement&&(i.current.src=e)}))}),[t,u,i]),e.default.createElement("img",{ref:i})},e.default.useMemo((function(){return n}),[])),Canvas:t()}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var n=e(require("react")),t=require("qrcode");function o(){var e=function(e){var o=e.text,u=e.options,r=e.logo,i=n.default.useRef(null);return n.default.useEffect((function(){var e,n,l,f,a,d,c;if(i&&i.current&&(t.toCanvas(i.current,o,u,(function(e){if(e)throw e})),r)){var v=i.current.getContext("2d");if(v){var s=new Image;s.src=r.src;var m=(null===(e=null==r?void 0:r.options)||void 0===e?void 0:e.width)||30;if((null===(n=null==r?void 0:r.options)||void 0===n?void 0:n.x)&&(null===(l=null==r?void 0:r.options)||void 0===l?void 0:l.y)){var p=null===(f=null==r?void 0:r.options)||void 0===f?void 0:f.x,g=null===(a=null==r?void 0:r.options)||void 0===a?void 0:a.y;s.onload=function(){v.drawImage(s,p,g,m,m)}}else if(!(null===(d=null==r?void 0:r.options)||void 0===d?void 0:d.x)||!(null===(c=null==r?void 0:r.options)||void 0===c?void 0:c.y)){var x=null==u?void 0:u.margin;x=x?8*x:0===x?0:32;var w=(((null==u?void 0:u.width)||116+x)-m)/2;s.onload=function(){v.drawImage(s,w,w,m,m)}}}}}),[i,o,u,r]),n.default.createElement("canvas",{ref:i})};return n.default.useMemo((function(){return e}),[])}exports.useQRCode=function(){var e,u;return{Image:(e=function(e){var o=e.text,u=e.options,r=n.default.useRef(null);return n.default.useEffect((function(){r&&r.current&&t.toDataURL(o,u,(function(e,n){if(e)throw e;r.current instanceof HTMLImageElement&&(r.current.src=n)}))}),[o,u,r]),n.default.createElement("img",{ref:r})},n.default.useMemo((function(){return e}),[])),Canvas:o(),SVG:(u=function(e){var o=e.text,u=e.options,r=n.default.useRef(null);return n.default.useEffect((function(){t.toString(o,u,(function(e,n){if(e)throw e;r.current instanceof HTMLDivElement&&(r.current.innerHTML=n)}))}),[o,u]),n.default.createElement("div",{ref:r})},n.default.useMemo((function(){return u}),[]))}};

dist/useQRCode.d.ts

@@ -32,2 +32,3 @@ /// <reference types="react" />
     Canvas: <T_1 extends HTMLCanvasElement>({ text, options, logo, }: IQRCode) => JSX.Element;
+    SVG: <T_2 extends HTMLDivElement>({ text, options, }: IQRCode) => JSX.Element;
 };

package.json

 {
   "name": "next-qrcode",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React hooks for generating QR code for your next React apps.",
@@ -5,0 +5,0 @@ "author": "Bunlong <[e-mail]>",

README.md

@@ -11,3 +11,3 @@ # next-qrcode
 
-* Render Canvas & Image
+* Render Canvas, SVG and Image
 * Support Numeric, Alphanumeric, Kanji and Byte mode
@@ -17,3 +17,3 @@ * Support Japanese, Chinese, Greek and Cyrillic characters
 
-<!-- [Live Demo](https://next-qrcode.github.io) -->
+[Live Demo](https://next-qrcode.js.org)
 
@@ -220,2 +220,124 @@ ## 🔧 Install
 
+## 💡 SVG
+
+### Usage
+
+```js
+import React from 'react';
+import { useQRCode } from 'next-qrcode';
+
+function App() {
+  const { SVG } = useQRCode();
+
+  return (
+    <SVG
+      text={'https://github.com/bunlong/next-qrcode'}
+      options={{
+        level: 'M',
+        margin: 3,
+        scale: 4,
+        width: 200,
+        color: {
+          dark: '#010599FF',
+          light: '#FFBF60FF',
+        },
+      }}
+    />
+  );
+}
+
+export default App;
+```
+
+### SVG props
+
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Require</th>
+      <th>Description</th>
+    </tr>
+  <thead>
+  <tbody>
+    <tr>
+      <td>text</td>
+      <td>string</td>
+      <td>✔️</td>
+      <td>Text/URL to encode.</td>
+    </tr>
+    <tr>
+      <td>options</td>
+      <td>options</td>
+      <td>❌</td>
+      <td>QR code options.</td>
+    </tr>
+    <tr>
+      <td>logo</td>
+      <td>logo</td>
+      <td>❌</td>
+      <td>QR code options.</td>
+    </tr>
+  </tbody>
+</table>
+
+### options
+
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Require</th>
+      <th>Description</th>
+    </tr>
+  <thead>
+  <tbody>
+    <tr>
+      <td>level</td>
+      <td>string</td>
+      <td><code>M</code></td>
+      <td>❌</td>
+      <td>Correction level. Possible values are <code>low</code>, <code>medium</code>, <code>quartile</code>, <code>high</code> or <code>L</code>, <code>M</code>, <code>Q</code>, <code>H</code>.</td>
+    </tr>
+    <tr>
+      <td>margin</td>
+      <td>number</td>
+      <td><code>4</code></td>
+      <td>❌</td>
+      <td>Define how much wide the quiet zone should be.</td>
+    </tr>
+    <tr>
+      <td>scale</td>
+      <td>number</td>
+      <td><code>4</code></td>
+      <td>❌</td>
+      <td>Scale factor. A value of <code>1</code> means 1px per modules (black dots).</td>
+    </tr>
+    <tr>
+      <td>width</td>
+      <td>number</td>
+      <td><code>4</code></td>
+      <td>❌</td>
+      <td>Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over <code>scale</code>.</td>
+    </tr>
+    <tr>
+      <td>color.dark</td>
+      <td>string</td>
+      <td><code>#000000ff</code></td>
+      <td>❌</td>
+      <td>Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than <code>color.light</code>.</td>
+    </tr>
+    <tr>
+      <td>color.light</td>
+      <td>string</td>
+      <td><code>#ffffffff</code></td>
+      <td>❌</td>
+      <td>Color of light module. Value must be in hex format (RGBA).</td>
+    </tr>
+  </tbody>
+</table>
+
 ## 💡 Image
@@ -355,5 +477,5 @@
 
-Latest version 2.3.0 (2022-11-14):
+Latest version 2.4.0 (2022-11-29):
 
-  * Add logo to canvas
+  * Add SVG
 
@@ -360,0 +482,0 @@ Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-qrcode/blob/master/CHANGELOG.md).

No alert changes

Improved metrics

Total package byte prevSize

21259

increased by18.3%

Lines of code

49

increased by6.52%

Number of lines in readme file

543

increased by28.98%

No dependency changes