Add basic qrious integration

2 files changed, 31 insertions, 14 deletions

diff --git a/index.js b/index.js
index df632d8..e18098f 100644
--- a/index.js
+++ b/index.js
@@ -1,24 +1,39 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import QRious from 'qrious'
 
 class Qrgen extends React.Component {
 
-    constructor (props) {
-        super(props)
-        this.state = {
-            'text': 'abcde'
-        }
+  constructor (props) {
+    super(props)
+    this.state = {
+      'text': 'abcde'
     }
+  }
 
-    render () {
-        return <div id='root'>
-            <h1>qrgen</h1>
-            <input type='text' value={this.state.text} onChange={(e) => {
-                this.setState({ text: e.target.value })
-            }}></input>
-            <p>{this.state.text}</p>
-        </div>
+  updateQr () {
+    const qr = new QRious({
+      element: document.getElementById('qr'),
+      value: this.state.text
+    })
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    if (this.state.text != prevState.text) {
+      this.updateQr()
     }
+  }
+
+  render () {
+    return <div id='root'>
+      <h1>qrgen</h1>
+      <canvas id='qr'></canvas>
+      <input type='text' value={this.state.text} onChange={(e) => {
+        this.setState({ text: e.target.value })
+      }}></input>
+      <p>{this.state.text}</p>
+    </div>
+  }
 }
 
 ReactDOM.render(<Qrgen />, document.getElementById('root'))
diff --git a/package.json b/package.json
index a3a1792..d71cf5a 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "description": "qrgen.xyz",
   "main": "index.js",
-  "dependencies": {},
+  "dependencies": {
+    "qrious": "^2.0.2"
+  },
   "devDependencies": {
     "babel-core": "^6.10.4",
     "babel-loader": "^6.2.4",