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

Output - Generate and download a QR code image in React - Clue Mediator

Steps to generate and download a QR code image

1. Create a react application
2. Install npm dependency
3. Generate QR code
4. Download QR code image
5. Output

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.

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.

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.

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 class="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 class="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}>
    </qrcode></div>
  );
}

export default App;

4. Download QR code image

In this step, we will download the QR code by generating the base64 image.

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 class="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" class="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.

App.js

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 class="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 class="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" class="download-btn" value="Download" onclick={downloadQRCode}>
    </qrcode></div>
  );
}

export default App;

I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project