Add QR size param

1 files changed, 16 insertions, 11 deletions

diff --git a/index.js b/index.js
index e18098f..ac2d47f 100644
--- a/index.js
+++ b/index.js
@@ -2,36 +2,41 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import QRious from 'qrious'
 
+import './base.scss'
+
 class Qrgen extends React.Component {
 
   constructor (props) {
     super(props)
     this.state = {
-      'text': 'abcde'
+      text: 'Hello World!',
+      size: 100
     }
   }
 
-  updateQr () {
-    const qr = new QRious({
-      element: document.getElementById('qr'),
-      value: this.state.text
+  componentDidMount () {
+    this.qr = new QRious({
+      element: this.refs.qr,
+      value: this.state.text,
+      size: this.state.size
     })
   }
 
   componentDidUpdate (prevProps, prevState) {
-    if (this.state.text != prevState.text) {
-      this.updateQr()
-    }
+    this.qr.value = this.state.text
+    this.qr.size = this.state.size
   }
 
   render () {
     return <div id='root'>
       <h1>qrgen</h1>
-      <canvas id='qr'></canvas>
+      <canvas ref='qr' id='qr'></canvas>
       <input type='text' value={this.state.text} onChange={(e) => {
-        this.setState({ text: e.target.value })
+        this.setState(Object.assign({}, this.state, { text: e.target.value }))
+      }}></input>
+      <input type='text' value={this.state.size} onChange={(e) => {
+        this.setState(Object.assign({}, this.state, { size: e.target.value }))
       }}></input>
-      <p>{this.state.text}</p>
     </div>
   }
 }