{"id":11611,"library":"qrcode.react","title":"qrcode.react - React QR Code Component","description":"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.","status":"active","version":"4.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/zpao/qrcode.react","tags":["javascript","react","react-component","qrcode","typescript"],"install":[{"cmd":"npm install qrcode.react","lang":"bash","label":"npm"},{"cmd":"yarn add qrcode.react","lang":"bash","label":"yarn"},{"cmd":"pnpm add qrcode.react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false}],"imports":[{"note":"Named export is the recommended pattern since v3.0.0. CommonJS `require` for named exports might require specific bundler configurations for dual-package support.","wrong":"const QRCodeSVG = require('qrcode.react').QRCodeSVG;","symbol":"QRCodeSVG","correct":"import { QRCodeSVG } from 'qrcode.react';"},{"note":"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).","wrong":"const QRCodeCanvas = require('qrcode.react').QRCodeCanvas;","symbol":"QRCodeCanvas","correct":"import { QRCodeCanvas } from 'qrcode.react';"},{"note":"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.","wrong":"const QRCode = require('qrcode.react');","symbol":"Default Export (deprecated)","correct":"import QRCode from 'qrcode.react'; // Avoid using"}],"quickstart":{"code":"import ReactDOM from 'react-dom/client';\nimport React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nconst App = () => (\n  <div style={{ padding: '20px', backgroundColor: '#f0f0f0', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n    <h1>Visit React Documentation</h1>\n    <p>Scan the QR code below to navigate to the official React documentation website.</p>\n    <QRCodeSVG\n      value=\"https://react.dev/\"\n      size={256}\n      level=\"H\" /* High error correction */\n      bgColor=\"#ffffff\"\n      fgColor=\"#20232a\"\n      marginSize={6}\n      imageSettings={{\n        src: \"https://react.dev/favicon.ico\",\n        x: undefined,\n        y: undefined,\n        height: 30,\n        width: 30,\n        excavate: true,\n        opacity: 0.9\n      }}\n      title=\"React Documentation QR Code\"\n      minVersion={4}\n      boostLevel={false}\n    />\n    <p style={{ marginTop: '20px', maxWidth: '400px', textAlign: 'center' }}>\n      This example demonstrates generating an SVG QR code with various customizations:\n      setting a specific value, size, error correction level (High), custom colors,\n      a larger margin, and embedding the React favicon with partial opacity.\n    </p>\n  </div>\n);\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(<App />);","lang":"typescript","description":"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+."},"warnings":[{"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`).","message":"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.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Replace `import QRCode from 'qrcode.react';` with `import { QRCodeSVG } from 'qrcode.react';` or `import { QRCodeCanvas } from 'qrcode.react';`.","message":"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.","severity":"deprecated","affected_versions":">=3.0.0"},{"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`.","message":"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.","severity":"deprecated","affected_versions":">=4.0.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":">=3.1.0"},{"fix":"Upgrade to `qrcode.react@4.0.1` or newer to resolve type resolution problems with modern TypeScript configurations.","message":"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.","severity":"gotcha","affected_versions":"4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using named imports: `import { QRCodeSVG } from 'qrcode.react';` instead of `import QRCodeSVG from 'qrcode.react';`.","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.","error":"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."},{"fix":"Replace `includeMargin` with `marginSize`. For example, `includeMargin={true}` becomes `marginSize={4}`.","cause":"Using the `includeMargin` prop which has been deprecated since v4.0.0.","error":"Property 'includeMargin' is deprecated. (property) includeMargin?: boolean"},{"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.","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.","error":"TS2345: Argument of type 'null' is not assignable to parameter of type 'string | string[] | undefined'."},{"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');`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'call') at Object.QRCodeCanvas (webpack-internal://...)"}],"ecosystem":"npm"}