File size: 1,729 Bytes
5de7420 |
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 69 70 71 72 73 74 75 76 77 78 79 |
'use client';
import React, { useEffect, useRef, useState } from 'react';
import QRCodeStyling from 'qr-code-styling';
interface QRCodeWithLogoProps {
value: string;
logoUrl?: string;
size?: number;
onQRCodeReady?: (qrCode: QRCodeStyling) => void;
backgroundColor?: string;
dotsColor?: string;
}
const QRCodeWithLogo: React.FC<QRCodeWithLogoProps> = ({
value,
logoUrl,
size = 300,
onQRCodeReady,
backgroundColor = '#FFFFFF',
dotsColor = '#000000'
}) => {
const ref = useRef<HTMLDivElement>(null);
const [qrCode, setQrCode] = useState<QRCodeStyling | null>(null);
useEffect(() => {
if (!value) return;
const qrCodeInstance = new QRCodeStyling({
width: size,
height: size,
type: 'svg',
data: value,
image: logoUrl,
dotsOptions: {
color: dotsColor,
type: 'rounded'
},
backgroundOptions: {
color: backgroundColor,
},
imageOptions: {
crossOrigin: 'anonymous',
margin: 10,
imageSize: 0.3,
hideBackgroundDots: true
},
cornersSquareOptions: {
type: 'extra-rounded',
color: dotsColor
},
cornersDotOptions: {
type: 'dot',
color: dotsColor
}
});
setQrCode(qrCodeInstance);
if (ref.current) {
ref.current.innerHTML = '';
qrCodeInstance.append(ref.current);
}
if (onQRCodeReady) {
onQRCodeReady(qrCodeInstance);
}
return () => {
if (ref.current) {
ref.current.innerHTML = '';
}
};
}, [value, logoUrl, size, backgroundColor, dotsColor, onQRCodeReady]);
return <div ref={ref} className="qr-code-container" />;
};
export default QRCodeWithLogo; |