From 5608782a0228c8b192d63f67923c70905f9ebb31 Mon Sep 17 00:00:00 2001
From: bluestreamlds <85561356+bluestreamlds@users.noreply.github.com>
Date: Thu, 20 Jan 2022 17:55:16 +0530
Subject: [PATCH] Feature - 2D QR code generate component (#10)

* Added: zxing packages

* Added: qr code generate component

* Added: proptypes and defaults

* Update: damn line endings

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>
---
 package.json                   |  2 ++
 src/components/QRcode/index.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/QRcode/index.js

diff --git a/package.json b/package.json
index b39cce8..04fce7b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,8 @@
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "12.1.10",
+    "@zxing/browser": "^0.0.10",
+    "@zxing/library": "^0.19.1",
     "apisauce": "^2.1.5",
     "chart.js": "3.4.1",
     "chroma-js": "2.1.2",
diff --git a/src/components/QRcode/index.js b/src/components/QRcode/index.js
new file mode 100644
index 0000000..3adcdbb
--- /dev/null
+++ b/src/components/QRcode/index.js
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import { BrowserQRCodeSvgWriter } from '@zxing/browser';
+import PropTypes from 'prop-types';
+
+/**
+ * Generates a QR code with the payload
+ * Ref: https://zxing-js.github.io/library/
+ * @param {{payload: string, className: string, width: number, height: number}}
+ */
+export default function QRcode({ payload, className, width, height }) {
+  const [svgHtml, setSvgHtml] = useState('Loading QR code');
+
+  useEffect(() => {
+    const codeWriter = new BrowserQRCodeSvgWriter();
+    const svgElement = codeWriter.write(payload, width, height);
+    setSvgHtml(svgElement.outerHTML);
+  }, [payload]);
+
+  return <div className={className} dangerouslySetInnerHTML={{ __html: svgHtml }}></div>;
+}
+
+QRcode.defaultProps = {
+  width: 300,
+  height: 300
+};
+
+// Typechecking props for the Breadcrumbs
+QRcode.propTypes = {
+  payload: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number
+};