{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install qrcode.react"],"cli":null},"imports":["import { QRCodeSVG } from 'qrcode.react';","import { QRCodeCanvas } from 'qrcode.react';","import QRCode from 'qrcode.react'; // Avoid using"],"auth":{"required":false,"env_vars":[]},"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+.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}