import React, { useEffect, useRef, useState } from "react";
import dynamic from 'next/dynamic';
import "qr-code-styling/dist/qr-code-styling.css";
const QRCodeStyling = dynamic(() => import("qr-code-styling"), {
ssr: false,
});
export default function App() {
const [options, setOptions] = useState({
// ... your options
});
const [fileExt, setFileExt] = useState("svg");
const [qrCode, setQRCode] = useState(null);
const ref = useRef(null);
useEffect(() => {
const qrCodeInstance = new QRCodeStyling(options);
setQRCode(qrCodeInstance);
return () => {
qrCodeInstance?.clear();
};
}, [options]);
useEffect(() => {
if (qrCode && ref.current) {
qrCode.append(ref.current);
}
}, [qrCode]);
useEffect(() => {
if (qrCode) {
qrCode.update(options);
}
}, [qrCode, options]);
const onDataChange = (event) => {
setOptions((options) => ({
...options,
data: event.target.value,
}));
};
const onExtensionChange = (event) => {
setFileExt(event.target.value);
};
const onDownloadClick = () => {
if (qrCode) {
qrCode.download({
extension: fileExt,
});
}
};
return (
<div className="flex flex-col items-center">
<h2>QR code styling for React</h2>
<div ref={ref} />
<div style={styles.inputWrapper}>
<input value={options.data} onChange={onDataChange} style={styles.inputBox} />
<select onChange={onExtensionChange} value={fileExt}>
<option value="svg">SVG</option>
<option value="png">PNG</option>
<option value="jpeg">JPEG</option>
<option value="webp">WEBP</option>
</select>
<button onClick={onDownloadClick}>Download</button>
</div>
</div>
);
}
const styles = {
inputWrapper: {
margin: "20px 0",
display: "flex",
justifyContent: "space-between",
width: "100%",
maxWidth: "300px",
},
inputBox: {
flexGrow: 1,
marginRight: 20,
},
};