qrcode.react

library4.2.0jsnpmunverified

qrcode.react is a dedicated React component designed for generating QR codes, providing flexible rendering options through either SVG or Canvas. The package is actively maintained, with the current stable version being 4.2.0. It receives regular updates, as evidenced by recent additions like React v19 peer dependency support and new features such as `boostLevel` and the ability to encode multiple segments via an array `value` prop. A key differentiator is its extensive prop API, which allows for fine-grained control over QR code generation, including customization of size, error correction level, foreground/background colors, precise margins (`marginSize`), embedded images with opacity, and minimum QR code version. It ships with embedded TypeScript definitions, ensuring a robust development experience within modern React applications.

serialization

npm install qrcode.react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · QRCODE.REACT

qrcode.react

serializationjavascriptv4.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

QRCodeSVG

✓ import { QRCodeSVG } from 'qrcode.react';

✗ const QRCodeSVG = require('qrcode.react').QRCodeSVG;

Named export is the recommended pattern since v3.0.0. CommonJS `require` for named exports might require specific bundler configurations for dual-package support.

QRCodeCanvas

✓ import { QRCodeCanvas } from 'qrcode.react';

✗ const QRCodeCanvas = require('qrcode.react').QRCodeCanvas;

Named export for Canvas rendering. Use this if Canvas is preferred over SVG for specific use cases (e.g., performance on very complex QR codes or specific environments).

Default Export (deprecated)

✓ import QRCode from 'qrcode.react'; // Avoid using

✗ const QRCode = require('qrcode.react');

The default export was deprecated in v3.0.0 and further marked with `@deprecated` JSDoc in v3.2.0. It is recommended to use the named exports `QRCodeSVG` or `QRCodeCanvas` instead to avoid future breaking changes.

Demonstrates generating a QR code using `QRCodeSVG` with a variety of customization props, including error correction, colors, margins, and an embedded image, suitable for React 18+.

import ReactDOM from 'react-dom/client'; import React from 'react'; import { QRCodeSVG } from 'qrcode.react'; const App = () => ( <div style={{ padding: '20px', backgroundColor: '#f0f0f0', display: 'flex', flexDirection: 'column', alignItems: 'center' }}> <h1>Visit React Documentation</h1> <p>Scan the QR code below to navigate to the official React documentation website.</p> <QRCodeSVG value="https://react.dev/" size={256} level="H" /* High error correction */ bgColor="#ffffff" fgColor="#20232a" marginSize={6} imageSettings={{ src: "https://react.dev/favicon.ico", x: undefined, y: undefined, height: 30, width: 30, excavate: true, opacity: 0.9 }} title="React Documentation QR Code" minVersion={4} boostLevel={false} /> <p style={{ marginTop: '20px', maxWidth: '400px', textAlign: 'center' }}> This example demonstrates generating an SVG QR code with various customizations: setting a specific value, size, error correction level (High), custom colors, a larger margin, and embedding the React favicon with partial opacity. </p> </div> ); const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render(<App />);

Debug

Known issues

breakingSupport for React versions older than 16.8 was removed in v3.0.0. Ensure your project's React dependency meets the minimum `^16.8.0` requirement.

fix

Upgrade React to version 16.8.0 or newer. Check `peerDependencies` for exact compatible ranges (currently `^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0`).

affects: <3.0.0

deprecatedThe default export from 'qrcode.react' was deprecated in v3.0.0 and marked with `@deprecated` JSDoc in v3.2.0. While still available, it's recommended to migrate to named exports (`QRCodeSVG` or `QRCodeCanvas`) as the default export may be removed in a future major version.

fix

Replace `import QRCode from 'qrcode.react';` with `import { QRCodeSVG } from 'qrcode.react';` or `import { QRCodeCanvas } from 'qrcode.react';`.

affects: >=3.0.0

deprecatedThe `includeMargin` prop was deprecated in v4.0.0 in favor of the more flexible `marginSize` prop. Using `includeMargin` will still work but might trigger deprecation warnings.

fix

Replace `includeMargin={true}` with `marginSize={4}` (or any desired module count). If `includeMargin={false}` was used, simply omit `marginSize` or set it to `0`.

affects: >=4.0.0

gotchaThe behavior of passing `null` to optional props changed in v3.1.0. Previously, `null` might have been treated differently due to the removal of `defaultProps` in favor of making props truly optional. This can lead to TypeScript errors if `null` was explicitly passed where `undefined` is expected for an optional prop.

fix

Ensure that `null` is not passed to optional props; instead, omit the prop entirely if you want to use its default value, or pass `undefined`.

affects: >=3.1.0

gotchaTypeScript type loading issues were present in v4.0.0, specifically when using `"moduleResolution": "Bundler"` or `"module": "ESNext"` in `tsconfig.json`. These were addressed in v4.0.1.

fix

Upgrade to `qrcode.react@4.0.1` or newer to resolve type resolution problems with modern TypeScript configurations.

affects: 4.0.0

Errors

Common errors & fixes

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Attempting to import `QRCodeSVG` or `QRCodeCanvas` as a default export, or using `require()` incorrectly, especially after v3.0.0 which heavily promoted named exports.

fix

Ensure you are using named imports: `import { QRCodeSVG } from 'qrcode.react';` instead of `import QRCodeSVG from 'qrcode.react';`.

Property 'includeMargin' is deprecated. (property) includeMargin?: boolean

Using the `includeMargin` prop which has been deprecated since v4.0.0.

fix

Replace `includeMargin` with `marginSize`. For example, `includeMargin={true}` becomes `marginSize={4}`.

TS2345: Argument of type 'null' is not assignable to parameter of type 'string | string[] | undefined'.

Passing `null` to an optional prop (like `value` if it were optional, or other optional props) after v3.1.0 changed how optional props are handled internally, potentially causing TypeScript errors.

fix

Instead of passing `null` to an optional prop, omit the prop entirely, or pass `undefined` if you need to explicitly clear a previously set value.

TypeError: Cannot read properties of undefined (reading 'call') at Object.QRCodeCanvas (webpack-internal://...)

This error can occur in some CommonJS environments or older bundler setups when trying to access `QRCodeCanvas` or `QRCodeSVG` as properties of `require('qrcode.react')` after v3.0.0 improved ESM/CJS dual-publishing but might still cause incompatibilities.

fix

If possible, switch to native ES module `import { QRCodeCanvas } from 'qrcode.react';`. If stuck with CommonJS, ensure your bundler supports dual-package exports, or try `const { QRCodeCanvas } = require('qrcode.react');`.

Upgrade

Version history

4.2.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for rendering React components.

Agent activity

31 hits · last 30 days

node

Resources

githubhttps://github.com/zpao/qrcode.react ↗

packagehttps://www.npmjs.com/package/qrcode.react ↗

homepagehttp://zpao.github.io/qrcode.react ↗