QR generator
import React, { useRef, useState } from "react";
import QRCodeStyling from "qr-code-styling";
const QRGenerator = () => {
const [data, setData] = useState("");
const [fgColor, setFgColor] = useState("#000000");
const [bgColor, setBgColor] = useState("#ffffff");
const [logo, setLogo] = useState(null);
const qrRef = useRef(null);
const qrCode = useRef(null);
const generateQR = () => {
const options = {
width: 300,
height: 300,
type: "canvas",
data: data,
image: logo,
dotsOptions: {
color: fgColor,
type: "rounded"
},
backgroundOptions: {
color: bgColor
},
imageOptions: {
crossOrigin: "anonymous",
margin: 10
}
};
qrCode.current = new QRCodeStyling(options);
if (qrRef.current) {
qrRef.current.innerHTML = "";
qrCode.current.append(qrRef.current);
}
};
const handleLogoUpload = (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => setLogo(reader.result);
reader.readAsDataURL(file);
};
const downloadQR = () => {
if (!qrCode.current) return;
qrCode.current.download({ name: "qr-code", extension: "png" });
};
return (
);
};
export default QRGenerator;
Comments
Post a Comment