App.jsx
|
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 |
// React.js Generate and Download QR Code From Text Using qrcode.react & Html2Canvas import React, { useState, useRef } from 'react'; import {QRCodeCanvas} from 'qrcode.react'; import html2canvas from 'html2canvas'; const App = () => { const [text, setText] = useState('https://reactjs.org/'); const qrCodeRef = useRef(null); // Function to download the QR code as an image const handleDownload = () => { if (qrCodeRef.current) { html2canvas(qrCodeRef.current).then((canvas) => { const link = document.createElement('a'); link.href = canvas.toDataURL('image/png'); link.download = 'qr-code.png'; link.click(); }); } }; return ( <div style={{ padding: '20px', textAlign: 'center' }}> <h1>QR Code Generator (qrcode.react)</h1> {/* QR Code Generator */} <div ref={qrCodeRef} style={{ marginBottom: '20px' }}> <QRCodeCanvas value={text} size={256} /> </div> {/* Input to change the QR Code */} <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Enter text for QR Code" style={{ marginTop: '20px', padding: '10px' }} /> {/* Download Button */} <div> <button onClick={handleDownload} style={{ marginTop: '20px', padding: '10px 20px', fontSize: '16px' }}> Download QR Code </button> </div> </div> ); }; export default App; |
