# 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.

Source: https://useqr.app/docs/developers/generate-a-qr-code-in-react · Last reviewed 2026-08-21 · UseQR is free forever, MIT licensed, no signup.

---

## The zero-dependency component

```jsx
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](/docs/developers/free-qr-code-api-no-key) 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:

```bash
npm install qrcode.react
```

```jsx
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](/glossary/quiet-zone) — the component
defaults to none, and a missing quiet zone is the most common reason a rendered code
[fails to scan](/docs/troubleshooting/qr-code-not-scanning-checklist). If you want the
underlying `qrcode` library instead of a component, see the
[JavaScript page](/docs/developers/generate-a-qr-code-in-javascript).

## 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](/docs/developers/generate-a-qr-code-in-nextjs) 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:

```jsx
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:

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

Full guidance in [QR alt text and screen readers](/docs/design/qr-code-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](/docs/developers/why-verify-that-your-qr-code-decodes) 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.

## Try it

- https://useqr.app/url
- https://useqr.app/json
- https://useqr.app/validate