Generate a QR code in JavaScript and React

The one-line version

<img
  src={`https://useqr.app/api/v1/qr?data=${encodeURIComponent(url)}&size=512`}
  width={256}
  height={256}
  alt="QR code linking to the download page"
/>

No dependency, no key, and the response is cacheable for a year so repeat renders cost nothing. encodeURIComponent is not optional — a URL with its own query string will break without it.

When to generate locally instead

Anything that is a credential or personal data — a WiFi password, a contact record, a payment identifier — should never be sent to a server just to draw an image. Use a client-side library:

npm install qrcode

import QRCode from "qrcode";

const dataUrl = await QRCode.toDataURL("WIFI:T:WPA;S:CafeGuest;P:espresso;;", {
  errorCorrectionLevel: "M",
  margin: 4,            // the four-module quiet zone
  width: 512,
});

margin: 4 matters. Several libraries default to a smaller margin, and an inadequate quiet zone is the single most common cause of codes that will not scan.

SVG in React without a component library

import QRCode from "qrcode";
import { useEffect, useState } from "react";

export function Qr({ value }) {
  const [svg, setSvg] = useState("");
  useEffect(() => {
    QRCode.toString(value, { type: "svg", margin: 4 }).then(setSvg);
  }, [value]);
  return <div aria-label="QR code" dangerouslySetInnerHTML={{ __html: svg }} />;
}

Dark mode

A QR code with a transparent background inverts on a dark page and becomes unreadable on many scanners. Always give it an explicit light background:

.qr { background: #fff; padding: 12px; border-radius: 12px; }

Accessibility

alt text should describe the destination, not the mechanism. A screen-reader user gets nothing from a QR code, so always render a real anchor alongside:

<a href={url}>{url}</a>

Verify styled codes

If you are colouring or restyling, decode the result before shipping:

const res = await fetch(
  `https://useqr.app/api/v1/verify?data=${encodeURIComponent(url)}&color=cccccc`
).then((r) => r.json());
// → whether it decoded, and a fix if not

FAQ

What is the simplest way to show a QR code in React?

Point an img element at the keyless API with the payload URL-encoded. No package to install and the response caches for a year.

When should I generate QR codes client-side instead?

Whenever the payload is a credential or personal data — WiFi passwords, contact records, payment identifiers. Those should never be sent to a server just to render an image.

Why does my JavaScript-generated QR code not scan?

Most often the quiet zone. Set margin to 4 modules; several libraries default to less, and an inadequate margin stops the scanner finding the code at all.

How do I handle dark mode?

Give the code an explicit light background. A transparent QR code on a dark page renders as an inverted code, which many scanners will not read.