Guide 9 min read March 23, 2026

Create QR Code using Reactjs (TypeScript + Download PNG)

Build a complete QR code generator in React with live preview, color customization, size controls, and one-click PNG download.

In this tutorial, you will build a full QR Code Generator using React and TypeScript. By the end, users can type any text or URL, customize size and colors, preview changes instantly, and download the QR as a PNG image.

What You Will Build

Live QR generation while typing
Custom foreground and background colors
Adjustable QR size
Download QR as PNG
Type-safe React component architecture

Step 1: Create a React + TypeScript Project

Use Create React App with the TypeScript template to bootstrap the project quickly.

bash

npx create-react-app qr-generator --template typescript
cd qr-generator
npm start

Step 2: Install Required Modules

Install the QR package plus a file download helper.

bash

npm install react-qr-code file-saver

react-qr-code: generates QR SVG from text or URL
file-saver: useful helper for downloads in browser apps

Step 3: Project Folder Structure

txt

src/
  App.tsx
  QRGenerator.tsx
  index.tsx

Keeping the QR UI in a separate component makes the code easier to maintain and extend.

Step 4: Create the QRGenerator Component

Create src/QRGenerator.tsx and paste the following code.

tsx

import React, { useState, useRef } from "react";
import QRCode from "react-qr-code";

const QRGenerator: React.FC = () => {
  const [text, setText] = useState("https://example.com");
  const [size, setSize] = useState(220);
  const [fgColor, setFgColor] = useState("#000000");
  const [bgColor, setBgColor] = useState("#ffffff");

  const qrRef = useRef<HTMLDivElement>(null);

  const downloadQR = () => {
    const svg = qrRef.current?.querySelector("svg");
    if (!svg) return;

    const svgData = new XMLSerializer().serializeToString(svg);
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    const img = new Image();
    img.onload = () => {
      canvas.width = size;
      canvas.height = size;
      ctx?.drawImage(img, 0, 0);

      const pngFile = canvas.toDataURL("image/png");
      const link = document.createElement("a");
      link.download = "qr-code.png";
      link.href = pngFile;
      link.click();
    };

    img.src = "data:image/svg+xml;base64," + btoa(svgData);
  };

  return (
    <div style={{ textAlign: "center" }}>
      <h2>React QR Code Generator</h2>

      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter URL or Text"
        style={{ padding: 10, width: 300 }}
      />

      <div style={{ marginTop: 10 }}>
        <label>Size: </label>
        <input
          type="number"
          value={size}
          onChange={(e) => setSize(Number(e.target.value))}
        />
      </div>

      <div style={{ marginTop: 10 }}>
        <label>Foreground: </label>
        <input
          type="color"
          value={fgColor}
          onChange={(e) => setFgColor(e.target.value)}
        />
      </div>

      <div style={{ marginTop: 10 }}>
        <label>Background: </label>
        <input
          type="color"
          value={bgColor}
          onChange={(e) => setBgColor(e.target.value)}
        />
      </div>

      <div
        ref={qrRef}
        style={{
          background: bgColor,
          padding: 20,
          display: "inline-block",
          marginTop: 20
        }}
      >
        <QRCode value={text} size={size} fgColor={fgColor} bgColor={bgColor} />
      </div>

      <br />

      <button
        onClick={downloadQR}
        style={{ marginTop: 20, padding: "10px 20px", cursor: "pointer" }}
      >
        Download QR
      </button>
    </div>
  );
};

export default QRGenerator;

Step 5: Update App.tsx

Now render the QR generator in your app root component.

tsx

import React from "react";
import QRGenerator from "./QRGenerator";

function App() {
  return (
    <div style={{ marginTop: 50 }}>
      <QRGenerator />
    </div>
  );
}

export default App;

Step 6: Run the Project

bash

npm start

When the app opens in your browser, you will get live QR updates, custom colors, dynamic sizing, and PNG export from the same screen.

How It Works

useState

React state stores the QR text, size, and colors. Each time state changes, the component re-renders and the QR image updates in real time.

useRef

A ref gives direct access to the rendered QR SVG element. That makes it possible to serialize the SVG and convert it to a downloadable PNG.

XMLSerializer + Canvas

The browser serializes the SVG into a string, then loads it into an image object. Canvas draws that image and exports PNG data with toDataURL, which is then downloaded through a temporary anchor element.