qrcode.react - React QR Code Component

Common errors

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

  cause 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

  cause 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'.

  cause 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://...)

  cause 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');`.

Warnings

• breaking Support 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`).
• deprecated The 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';`.
• deprecated The `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`.
• gotcha The 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`.
• gotcha TypeScript 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.

Install

• npm install qrcode.react npm
• yarn add qrcode.react yarn
• pnpm add qrcode.react pnpm

Imports

• QRCodeSVG
  wrong:

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

  correct:

  import { QRCodeSVG } from 'qrcode.react';

  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
  wrong:

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

  correct:

  import { QRCodeCanvas } from 'qrcode.react';

  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)
  wrong:

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

  correct:

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

  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.

Quickstart

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 />);