Generate a QR code in React

In React, the simplest QR component is an <img> pointing at the keyless API with the payload URL-encoded: cacheable and dependency-free. For payloads that must stay on the device, render <QRCodeSVG> from qrcode.react. Both re-render automatically when the value prop changes; always pair the code with a real link.

The zero-dependency component

export function Qr({ value, size = 256 }) {
  const src = `https://useqr.app/api/v1/qr?data=${encodeURIComponent(value)}&size=${size * 2}`;
  return <img src={src} width={size} height={size} alt={`QR code linking to ${value}`} />;
}

Nothing to install. The keyless API responds with Cache-Control: public, max-age=31536000, immutable, so the browser fetches each distinct payload exactly once: re-renders are free. Requesting at 2× the display size keeps the code crisp on high-DPI screens.

When value changes, the src changes, and React swaps the image. That is the whole state story: no effects, no refs.

Client-side with qrcode.react

When the payload is a credential (a WiFi password, a vCard, a payment string) it should not travel to any server just to draw a picture. qrcode.react renders entirely in the browser and ships two components:

npm install qrcode.react

import { QRCodeSVG } from "qrcode.react";

<QRCodeSVG value="WIFI:T:WPA;S:CafeGuest;P:espresso;;" size={256} level="M" marginSize={4} />

Prefer QRCodeSVG over QRCodeCanvas: SVG stays sharp at any zoom and prints cleanly. marginSize={4} is the 4-module quiet zone: the component defaults to none, and a missing quiet zone is the most common reason a rendered code fails to scan. If you want the underlying qrcode library instead of a component, see the JavaScript page.

Server-side rendering

The <img> pattern is SSR-safe by construction. It is just markup. QRCodeSVG also renders on the server (it is plain SVG, no canvas or DOM APIs), so it works in frameworks that server-render React. QRCodeCanvas does not; it needs a browser canvas. In Next.js there are additional options (route-handler proxies and build-time generation) covered on that page.

Dynamic payloads

For a form that live-updates a code, debounce the API-backed version so you do not fetch per keystroke:

const [text, setText] = useState("https://example.com");
const deferred = useDeferredValue(text);
// <Qr value={deferred} />

useDeferredValue (React 18+) is enough here; the immutable caching means revisiting a previous value costs nothing.

Accessibility

A QR code is invisible to screen readers, and alt="QR code" tells a user nothing they can act on. Describe the destination, and render a real link next to the code: the code is an optimisation for camera-holders, not the only path:

<a href={value}>Open on this device</a>

Full guidance in QR alt text and screen readers.

Check styled output

If you pass brand colours through the API, prove the combination still decodes before it ships, GET /api/v1/verify with the same parameters returns scannable plus any issues. One verify call in a test beats a support ticket from the field.

FAQ

What is the best React QR code component?

For public URLs, a plain img element against the keyless API, zero dependencies and cached for a year. For sensitive payloads, QRCodeSVG from qrcode.react renders locally.

Does qrcode.react work with server-side rendering?

QRCodeSVG does: it emits plain SVG with no browser APIs. QRCodeCanvas needs a real canvas, so it only renders client-side.

Why does my qrcode.react code fail to scan?

Usually the missing quiet zone. Set marginSize to 4; the component renders no margin by default, and scanners need those four clear modules on every side.

How do I update the QR code when state changes?

Pass the state into the value prop (or the img src). React re-renders on change; wrap fast-changing input in useDeferredValue to avoid fetching per keystroke.