@sky-mavis/tanto-widget
Version:
Tanto Widget
101 lines • 2.33 kB
JavaScript
import {jsx}from'@emotion/react/jsx-runtime';import {useTheme}from'@emotion/react';import QRCodeStyling from'qr-code-styling';import {memo,useRef,useMemo,useEffect}from'react';import {blueFilledWCLogoUri}from'../../assets/data-uris.mjs';const SIZE = 236;
const RADIUS = 24;
const QRCode = memo(({
value,
size = SIZE,
logo = blueFilledWCLogoUri
}) => {
const theme = useTheme();
const qrRef = useRef(null);
const qrCodeRef = useRef(null);
const defaultOptions = useMemo(() => ({
type: 'svg',
dotsOptions: {
type: 'dots',
gradient: {
type: 'radial',
colorStops: [{
offset: 0.0,
color: '#0c6fff'
}, {
offset: 0.12,
color: '#105fff'
}, {
offset: 0.25,
color: '#104aff'
}, {
offset: 0.4,
color: '#0e3fff'
}, {
offset: 0.55,
color: '#1325c2'
}, {
offset: 0.7,
color: '#1a2fb3'
}, {
offset: 0.85,
color: '#1f3a88'
}, {
offset: 0.98,
color: '#1b1d5a'
}, {
offset: 1.0,
color: '#201f1d'
}]
}
},
cornersSquareOptions: {
type: 'extra-rounded',
color: '#201f1d'
},
cornersDotOptions: {
type: 'dot',
color: '#201f1d'
},
backgroundOptions: {
color: theme.qrcodeBackground
},
imageOptions: {
margin: 3,
imageSize: 0.18
},
qrOptions: {
errorCorrectionLevel: 'H'
}
}), [theme]);
useEffect(() => {
if (!qrRef.current) return;
if (!qrCodeRef.current) {
qrCodeRef.current = new QRCodeStyling({
width: size,
height: size,
data: value,
image: logo,
...defaultOptions
});
qrCodeRef.current.append(qrRef.current);
} else {
qrCodeRef.current.update({
width: size,
height: size,
data: value,
image: logo
});
}
return () => {
if (qrRef.current) {
qrRef.current.innerHTML = '';
}
qrCodeRef.current = null;
};
}, [value, size, logo]);
return jsx("div", {
ref: qrRef,
css: {
width: size,
height: size,
borderRadius: RADIUS,
overflow: 'hidden'
}
});
});export{QRCode};