1 files changed, 28 insertions, 13 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'))