From f67906cd7a03bd1171a6d9b3b0c0a84116d35190 Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Mon, 15 Aug 2016 16:10:24 +0300
Subject: Add basic qrious integration

---
 index.js | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)

(limited to 'index.js')

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'))
-- 
cgit v1.3.1