blob: 306a8195507bb9ad35d01a07e3f063f34d082ee3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
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: 'Hello World!',
size: 300
}
}
componentDidMount () {
this.qr = new QRious({
element: this.refs.qr,
value: this.state.text,
size: this.state.size
})
this.refs.qrimg.src = this.qr.toDataURL()
}
componentDidUpdate (prevProps, prevState) {
this.qr.value = this.state.text
this.qr.size = this.state.size
this.refs.qrimg.src = this.qr.toDataURL()
}
render () {
return <div id='root'>
<h1>QR Code Generator</h1>
<input type='text' value={this.state.text} onChange={(e) => {
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 className='save'>To save the QR code, right-click the image and 'Save Image As', or touch and hold the image on your mobile browser.</p>
<canvas ref='qr' id='qr'></canvas>
<img ref='qrimg' id='qrimg'></img>
<footer>
<p>Created by <a href="https://yuv.al">Yuval Adam</a>. Source available on <a href="https://github.com/yuvadm/qrgen.xyz">Github</a>.</p>
</footer>
</div>
}
}
ReactDOM.render(<Qrgen />, document.getElementById('root'))
|
