QR Code Generation vs Scanning in React: react-qr-code vs react-qr-reader

At first glance, react-qr-code and react-qr-reader might seem like two sides of the same coin. In practice, they solve entirely different problems with zero overlap in functionality. One draws QR codes; the other reads them from a camera. Confusing them leads to architectural dead ends. Let’s clarify exactly what each does — and how to use them correctly.

🖼️ Core Purpose: Display vs Capture

react-qr-code generates QR codes as SVG elements.

• Input: a string (e.g., URL, text, JSON)
• Output: an <svg> you can style, scale, or embed anywhere
• No runtime dependencies beyond React

// react-qr-code: Generate a QR code for a URL
import QRCode from "react-qr-code";

function ShareLink() {
  return (
    <QRCode
      size={256}
      value="https://example.com/ticket/12345"
      viewBox={`0 0 256 256`}
    />
  );
}

react-qr-reader captures and decodes QR codes from the user’s camera.

• Input: live video stream from webcam
• Output: decoded string data when a QR code is detected
• Requires browser camera permissions and WebRTC support

// react-qr-reader: Scan QR codes from camera
import { useState } from "react";
import { QrReader } from "react-qr-reader";

function Scanner() {
  const [data, setData] = useState("No result");

  return (
    <>
      <QrReader
        onResult={(result, error) => {
          if (!!result) setData(result?.text);
          if (!!error) console.info(error);
        }}
        constraints={{ facingMode: "environment" }}
        containerStyle={{ width: "100%" }}
      />
      <p>{data}</p>
    </>
  );
}

⚠️ Critical distinction: You cannot use react-qr-code to scan anything, and react-qr-reader cannot render a QR image. They are mutually exclusive in function.

🎨 Styling and Customization

react-qr-code gives you full SVG control.

• Customize colors via fgColor/bgColor
• Adjust padding with margin
• Scale infinitely without quality loss (vector-based)

<QRCode
  value="Custom styled QR"
  fgColor="#000080"   // Dark blue modules
  bgColor="#F0F8FF"   // Alice blue background
  margin={4}           // Quiet zone padding
/>

react-qr-reader offers limited visual customization.

• Style the video container via containerStyle
• Overlay custom UI (e.g., scan frame) using absolute positioning
• Cannot modify the video stream itself (browser-controlled)

<QrReader
  containerStyle={{
    position: "relative",
    width: "300px",
    height: "300px",
    border: "2px solid #007bff"
  }}
  videoStyle={{
    objectFit: "cover"
  }}
/>
// Add overlay separately:
<div style={{
  position: "absolute",
  top: "50px",
  left: "50px",
  width: "200px",
  height: "200px",
  border: "2px dashed red"
}} />

📱 Browser and Device Requirements

react-qr-code works everywhere.

• Pure React component with no special permissions
• Renders identically on desktop, mobile, and server (SSR-friendly)
• Zero security prompts

react-qr-reader requires specific conditions:

• HTTPS (mandatory for camera access in modern browsers)
• User permission to access camera
• Mobile devices need rear camera access (facingMode: "environment")
• Fails silently on unsupported environments (e.g., Safari iOS < 15)

Always handle errors gracefully:

<QrReader
  onResult={(result, error) => {
    if (error?.name === "NotAllowedError") {
      alert("Camera access denied. Please enable permissions.");
    }
  }}
/>

⚙️ Performance and Dependencies

react-qr-code is dependency-free.

• Uses built-in React rendering
• Generates QR codes instantly (no async operations)
• Bundle impact is minimal (~2KB minified)

react-qr-reader bundles heavy decoding libraries.

• Depends on @zxing/library for QR parsing
• Loads WebAssembly modules for performance
• Initial load may be slower due to decoder initialization

This affects your app’s startup time — avoid loading react-qr-reader until the scan feature is needed (code-splitting recommended):

// Lazy-load scanner only when required
const Scanner = lazy(() => import("./Scanner"));

function App() {
  const [showScanner, setShowScanner] = useState(false);

  return (
    <>
      <button onClick={() => setShowScanner(true)}>
        Open Scanner
      </button>
      {showScanner && <Scanner />}
    </>
  );
}

🔁 Real-World Integration Patterns

Pattern 1: Generate + Scan in One App (e.g., Event Check-in)

You’ll need both packages:

// Ticket generator (admin side)
<QRCode value={`event:conf2024:user:${userId}`} />

// Ticket scanner (staff side)
<QrReader
  onResult={(result) => {
    if (result?.text.startsWith("event:conf2024:")) {
      validateTicket(result.text);
    }
  }}
/>

Pattern 2: Dynamic QR Content

Update react-qr-code’s value prop to change content:

function DynamicQR() {
  const [input, setInput] = useState("");
  return (
    <>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <QRCode value={input || "Enter text"} />
    </>
  );
}

Pattern 3: Scan-to-Action Workflows

Use react-qr-reader to trigger actions:

<QrReader
  onResult={(result) => {
    if (result?.text.startsWith("https://")) {
      window.open(result.text, "_blank");
    }
  }}
/>

🛑 Common Pitfalls to Avoid

• Assuming react-qr-reader works on HTTP: It won’t. Use localhost for dev, but deploy to HTTPS.
• Over-styling react-qr-code with CSS filters: Stick to fgColor/bgColor. CSS transforms may break QR readability.
• Ignoring mobile UX in scanning: Always set constraints={{ facingMode: "environment" }} for rear camera on phones.
• Not handling camera permission errors: Users may deny access — provide fallback instructions.

✅ When to Use Which

💡 Final Recommendation

Treat these as specialized single-purpose tools:

• Need to show a QR code? → react-qr-code
• Need to read a QR code from camera? → react-qr-reader

Never try to force one into the other’s role. If your app requires both capabilities (common in ticketing, payments, or IoT), install both packages — they coexist peacefully and cover the full QR workflow spectrum.