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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import React from 'react'
import ReactDOM from 'react-dom'
import QRious from 'qrious'
import './base.scss'
class SizeRadios extends React.Component {
constructor (props) {
super(props)
this.state = {
selected: props.vals[0]
}
}
render () {
return <div className='radios'>
{this.props.vals.map((v) => {
return <input type='radio' name={this.props.name} value={v}></input>
})}
</div>
}
}
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='qrgen'>
<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>
<SizeRadios name='size' vals={[1,2,3,4]} />
<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'))
|
