MyCrypto/common/components/ui/QRCode.jsx

72 lines
1.3 KiB
JavaScript

// @flow
import React from 'react';
import QRCodeLib from 'qrcode';
// FIXME should store limited amount if history
// data -> qr cache
const cache: { [key: string]: string } = {};
type Props = {
data: string
};
type State = {
qr?: string
};
export default class QRCode extends React.Component {
props: Props;
state: State = {};
componentWillMount() {
// Start generating QR codes immediately
this._generateQrCode(this.props.data);
}
componentWillReceiveProps(nextProps: Props) {
// Regenerate QR codes if props change
if (nextProps.data !== this.props.data) {
this._generateQrCode(nextProps.data);
}
}
_generateQrCode(value: string) {
if (cache[value]) {
this.setState({ qr: cache[value] });
return;
}
QRCodeLib.toDataURL(
value,
{
color: {
dark: '#000',
light: '#fff'
},
margin: 0,
errorCorrectionLevel: 'H'
},
(err, qr) => {
if (err) return;
cache[value] = qr;
this.setState({ qr });
}
);
}
render() {
const { qr } = this.state;
if (!qr) {
return null;
}
return (
<img
src={qr}
style={{
width: '100%',
height: '100%'
}}
/>
);
}
}