react-qrcode-hook - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

index.js

 const { useState, useEffect } = require("react");
 const QrCode = require("qrcode");
 
-const useQrCode = (code)=> {
+const useQrCode = (...args) => {
   const [qrCode, setQrCode] = useState(null);
   useEffect(() => {
-    if (code) {
-      const canvas = document.createElement("canvas");
+    if (args.length && args[0]) {
+      const canvas = document.createElement('canvas');
       canvas.width = 1024;
       canvas.height = 1024;
-      QrCode.toDataURL(canvas, code).then(res => setQrCode(res));
+      QrCode.toDataURL(canvas, ...args).then(res => setQrCode(res));
     }
-  }, [code]);
+  }, args);
   return qrCode;
-} 
+};
 
-module.exports = useQrCode;
+module.exports = useQrCode;

package.json

 {
   "name": "react-qrcode-hook",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React hook for creating QR Code data urls",
@@ -21,2 +21,3 @@ "main": "index.js",
   "scripts": {
+    "test": "echo \"there are no tests and that... ok (for now)\"",
     "example": "parcel example.html",
@@ -23,0 +24,0 @@ "contributors:add": "all-contributors add",

README.md

@@ -1,8 +0,8 @@
-# `React QRCode Hook` 👾
+# `React QRCode Hook` 📸
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
 
 > React hook for creating QR Code data urls
 
-[![Edit useReact hook](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6v25x8pyyn)
+[![Edit useReact hook](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/xjojxm82jw)
 
@@ -24,3 +24,3 @@ ## Install
 This hook returns a data URL which can be added as the source to an image. The
-only parameter to the hook function is the string you want to codify.
+only parameter to the hook function requires is the string you want to codify.
 
@@ -31,3 +31,3 @@ ```js
 function App() {
-  useQrCode("Hello There");
+  const qrCode = useQrCode("Hello There");
   return (
@@ -49,2 +49,54 @@ <div
 
+This will produce a QR Code as follows.
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/29359616/53666334-dbcea200-3c3b-11e9-9565-96d30151bf43.png" width="86" />
+</p>
+
+## Advanced
+
+You can also pass an `options` object as a second parameter to the hook as follows.
+You can see a [complete list of options](https://www.npmjs.com/package/qrcode#qr-code-options) here.
+
+```js
+const qrCode = useQrCode(text, options);
+```
+
+And here is some sample code that uses `options`.
+
+
+```js
+const options = {
+  margin: 5,
+  scale: 10,
+  color: {
+    dark: '#ffffff',
+    light: '#000099',
+  },
+};
+
+function App() {
+  const qrCode = useQrCode('https://americanexpress.io', options);
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <img alt="qr code" src={qrCode} />
+    </div>
+  );
+}
+```
+
+The code above produces this QR Code. Notice how it changed the colors, size, and padding of the image?
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/29359616/53666074-23086300-3c3b-11e9-9c2d-8289219fe30e.png" width="350" />
+</p>
+
 ## Example
@@ -73,4 +125,3 @@
 <!-- prettier-ignore -->
-| [<img src="https://avatars1.githubusercontent.com/u/6558157?v=4" width="100px;"/><br /><sub><b>Alex</b></sub>](https://ralexanderson.com)<br />[💻](https://github.com/alexanderson1993/react-qrcode-hook/commits?author=alexanderson1993 "Code") |
-| :---: |
+<table><tr><td align="center"><a href="https://ralexanderson.com"><img src="https://avatars1.githubusercontent.com/u/6558157?v=4" width="100px;" alt="Alex"/><br /><sub><b>Alex</b></sub></a><br /><a href="https://github.com/alexanderson1993/react-qrcode-hook/commits?author=alexanderson1993" title="Code">💻</a></td><td align="center"><a href="http://donavon.com"><img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt="Donavon West"/><br /><sub><b>Donavon West</b></sub></a><br /><a href="https://github.com/alexanderson1993/react-qrcode-hook/commits?author=donavon" title="Code">💻</a> <a href="https://github.com/alexanderson1993/react-qrcode-hook/commits?author=donavon" title="Documentation">📖</a></td></tr></table>
 
@@ -77,0 +128,0 @@ <!-- ALL-CONTRIBUTORS-LIST:END -->

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

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

5961

increased by43.64%

Lines of code

15

increased by7.14%

Number of lines in readme file

129

increased by65.38%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes