Untitled
unknown
plain_text
a year ago
2.1 kB
1
Indexable
Never
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, }, };