# Generate a QR code in JavaScript and React

> For a QR code in a browser or React app, either point an <img> at the keyless API — one line, no dependency — or use a client-side library such as qrcode when the payload must not leave the device. Use the API for public URLs, local generation for credentials.

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

---

## The one-line version

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

```bash
npm install qrcode
```

```js
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

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

```css
.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:

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

## Verify styled codes

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

```js
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.

## Try it

- https://useqr.app/developers