Generate and download a QR code image in React
Today we’ll show you how to generate and download a QR code image in React.
You may need to generate a QR code image based on the given information such as URL, ID, or some other unique id. So we will show you the simple way to generate a QR code and download image using React.
Demo Application
Steps to generate and download a QR code image
1. Create a react application
Let’s create a react app using the create-react-app package. Run the following command to create a react application.
1 | npx create-react-app generate-download-qr-code-react |
2. Install npm dependency
Here, we will use the qrcode.react npm package to generate a QR code. Run the following command to install the dependency.
1 | npm i qrcode.react |
3. Generate QR code
Now, we will use the input text to capture the text value for QR code and use the button to generate a QR code using qrcode.react package.
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 | import React, { useState } from 'react'; import QRCode from 'qrcode.react'; function App() { const [inputText, setInputText] = useState(''); const [qrCodeText, setQRCodeText] = useState(''); // generate QR code const generateQRCode = () => { setQRCodeText(inputText); } return ( <div className="App"> <h3>Generate and download a QR code image in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <div className="qr-input"> <input type="text" placeholder="Enter input" value={inputText} onChange={e => setInputText(e.target.value)} /> <input type="button" value="Generate" onClick={generateQRCode} /> </div> <QRCode id="qrCodeEl" size={150} value={qrCodeText} /> </div> ); } export default App; |
4. Download QR code image
In this step, we will download the QR code by generating the base64 image.
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 | import React, { useState } from 'react'; import QRCode from 'qrcode.react'; function App() { ... ... // download QR code const downloadQRCode = () => { const qrCodeURL = document.getElementById('qrCodeEl') .toDataURL("image/png") .replace("image/png", "image/octet-stream"); console.log(qrCodeURL) let aEl = document.createElement("a"); aEl.href = qrCodeURL; aEl.download = "QR_Code.png"; document.body.appendChild(aEl); aEl.click(); document.body.removeChild(aEl); } return ( <div className="App"> <h3>Generate and download a QR code image in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> ... ... <input type="button" className="download-btn" value="Download" onClick={downloadQRCode} /> </div> ); } export default App; |
5. Output
At last, combine all code together and run the application to check the output in the browser.
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 | import React, { useState } from 'react'; import QRCode from 'qrcode.react'; function App() { const [inputText, setInputText] = useState(''); const [qrCodeText, setQRCodeText] = useState(''); // generate QR code const generateQRCode = () => { setQRCodeText(inputText); } // download QR code const downloadQRCode = () => { const qrCodeURL = document.getElementById('qrCodeEl') .toDataURL("image/png") .replace("image/png", "image/octet-stream"); console.log(qrCodeURL) let aEl = document.createElement("a"); aEl.href = qrCodeURL; aEl.download = "QR_Code.png"; document.body.appendChild(aEl); aEl.click(); document.body.removeChild(aEl); } return ( <div className="App"> <h3>Generate and download a QR code image in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <div className="qr-input"> <input type="text" placeholder="Enter input" value={inputText} onChange={e => setInputText(e.target.value)} /> <input type="button" value="Generate" onClick={generateQRCode} /> </div> <QRCode id="qrCodeEl" size={150} value={qrCodeText} /> <br /> <input type="button" className="download-btn" value="Download" onClick={downloadQRCode} /> </div> ); } export default App; |
I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂
