2023-01-07 20:54:12 +00:00
|
|
|
import QRCodeStyling from "qr-code-styling";
|
2023-01-08 20:36:36 +00:00
|
|
|
import { useEffect, useRef } from "react";
|
2023-01-07 20:54:12 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export interface QrCodeProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
data?: string;
|
|
|
|
link?: string;
|
|
|
|
avatar?: string;
|
|
|
|
height?: number;
|
|
|
|
width?: number;
|
|
|
|
className?: string;
|
2023-01-16 17:48:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default function QrCode(props: QrCodeProps) {
|
2023-02-07 20:04:50 +00:00
|
|
|
const qrRef = useRef<HTMLDivElement>(null);
|
2023-01-08 20:36:36 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if ((props.data?.length ?? 0) > 0 && qrRef.current) {
|
|
|
|
let qr = new QRCodeStyling({
|
|
|
|
width: props.width || 256,
|
|
|
|
height: props.height || 256,
|
|
|
|
data: props.data,
|
|
|
|
margin: 5,
|
|
|
|
type: "canvas",
|
|
|
|
image: props.avatar,
|
|
|
|
dotsOptions: {
|
|
|
|
type: "rounded",
|
|
|
|
},
|
|
|
|
cornersSquareOptions: {
|
|
|
|
type: "extra-rounded",
|
|
|
|
},
|
|
|
|
imageOptions: {
|
|
|
|
crossOrigin: "anonymous",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
qrRef.current.innerHTML = "";
|
|
|
|
qr.append(qrRef.current);
|
|
|
|
if (props.link) {
|
|
|
|
qrRef.current.onclick = function (e) {
|
|
|
|
let elm = document.createElement("a");
|
|
|
|
elm.href = props.link!;
|
|
|
|
elm.click();
|
|
|
|
};
|
|
|
|
}
|
|
|
|
} else if (qrRef.current) {
|
|
|
|
qrRef.current.innerHTML = "";
|
|
|
|
}
|
|
|
|
}, [props.data, props.link]);
|
2023-01-07 20:54:12 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={`qr${props.className ? ` ${props.className}` : ""}`}
|
|
|
|
ref={qrRef}
|
|
|
|
></div>
|
|
|
|
);
|
|
|
|
}
|