{"id":11833,"library":"react-qr-code","title":"React QR Code Component","description":"react-qr-code is a JavaScript library providing a `<QRCode />` component for generating and rendering QR codes within both React and React Native applications. As of version 2.0.18, the library is actively maintained with frequent patch releases, ensuring compatibility and addressing minor bugs. It differentiates itself by offering a consistent API for both web and mobile platforms, leveraging `react-native-svg` for its React Native implementation. The component strictly adheres to the official QR code specification, supporting various error correction levels and substantial data capacities, making it a reliable choice for easily integrating QR code generation into the React ecosystem.","status":"active","version":"2.0.18","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/rosskhanas/react-qr-code","tags":["javascript","code","generator","qr","react","react-native","typescript"],"install":[{"cmd":"npm install react-qr-code","lang":"bash","label":"npm"},{"cmd":"yarn add react-qr-code","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-qr-code","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React-based application.","package":"react","optional":false},{"reason":"Required for rendering QR codes in React Native environments, as the component uses SVG. Must be installed separately by the user.","package":"react-native-svg","optional":true}],"imports":[{"note":"The primary `QRCode` component is provided as the default export of the module. Attempting to use a named import will result in a runtime error.","wrong":"import { QRCode } from 'react-qr-code';","symbol":"QRCode","correct":"import QRCode from 'react-qr-code';"},{"note":"For CommonJS environments, `QRCode` is the default export. Destructuring from `require()` will not work correctly.","wrong":"const { QRCode } = require('react-qr-code');","symbol":"QRCode","correct":"const QRCode = require('react-qr-code');"},{"note":"TypeScript users can import the `QRCodeProps` interface to correctly type the component's properties.","symbol":"QRCodeProps","correct":"import type { QRCodeProps } from 'react-qr-code';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport QRCode from 'react-qr-code';\n\nfunction App() {\n  const [value, setValue] = useState('https://checklist.day');\n\n  return (\n    <div style={{\n      padding: '20px', \n      backgroundColor: '#f0f0f0', \n      display: 'flex', \n      flexDirection: 'column', \n      alignItems: 'center',\n      minHeight: '100vh'\n    }}>\n      <h1>QR Code Generator</h1>\n      <p>Enter text or a URL below to generate a QR code:</p>\n      <input\n        type=\"text\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        style={{ marginBottom: '20px', width: '300px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}\n        placeholder=\"Enter QR code content\"\n      />\n      {value && (\n        <div style={{ \n          background: 'white', \n          padding: '16px', \n          borderRadius: '8px', \n          boxShadow: '0 4px 8px rgba(0,0,0,0.1)', \n          display: 'inline-block'\n        }}>\n          <QRCode\n            size={256}\n            style={{ height: \"auto\", maxWidth: \"100%\", width: \"100%\" }}\n            value={value}\n            viewBox={`0 0 256 256`}\n            level=\"H\"\n            fgColor=\"#333333\"\n            bgColor=\"#FFFFFF\"\n          />\n        </div>\n      )}\n      {!value && <p>Please enter some content to generate a QR code.</p>}\n      <p style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>Scan this QR code with your device.</p>\n    </div>\n  );\n}\n\n// Assuming a root HTML element with id='root' exists\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(<App />);\n} else {\n  console.error(\"No element with ID 'root' found to render the React app. Ensure your HTML has `<div id='root'></div>`.\");\n}\n","lang":"typescript","description":"This quickstart demonstrates how to render a basic, responsive QR code component in a React application. It includes a user input field to dynamically update the QR code's content and applies essential styling to ensure a proper 'quiet zone' for scannability."},"warnings":[{"fix":"Run `npm install react-native-svg` (or `yarn add react-native-svg`) and then `cd ios && pod install` for iOS projects.","message":"For React Native applications, `react-native-svg` must be installed manually. Although it was a peer dependency prior to version 2.0.15, it is now an implicit runtime requirement and will cause rendering issues if not present.","severity":"gotcha","affected_versions":">=2.0.15"},{"fix":"Always wrap the `<QRCode />` component in a container with sufficient light-colored padding, for example: `<div style={{ background: 'white', padding: '16px' }}><QRCode value='...' /></div>`.","message":"To ensure reliable scanning, a 'quiet zone' (a clear, light-colored border) around the QR code is crucial. Without it, some scanners may struggle to read the code.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `import QRCode from 'react-qr-code';` for ES modules or `const QRCode = require('react-qr-code');` for CommonJS environments.","message":"The `QRCode` component is exported as a default export. Attempting to import it as a named export (e.g., `import { QRCode } from 'react-qr-code';`) will result in a runtime `TypeError`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your React environment and type definitions are compatible with React 19. If issues arise, consider upgrading React or adjusting custom rendering logic to match `ReactNode` return types.","message":"Version 2.0.16 included a bug fix to update the internal `render()` return type to `ReactNode` for compatibility with React 19. While this primarily affects internal types, it could potentially impact applications with highly customized rendering logic or strict TypeScript configurations when upgrading to React 19.","severity":"breaking","affected_versions":">=2.0.16"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `react-native-svg` via `npm install react-native-svg` (or `yarn add react-native-svg`) and then navigate to your `ios` directory and run `pod install`.","cause":"The `react-native-svg` library, which is essential for rendering QR codes in React Native, is not installed or linked correctly.","error":"Invariant Violation: View config not found for name 'RNSVGPath'. Are you sure this native component exists and was properly linked?"},{"fix":"Change your import statement from `import { QRCode } from 'react-qr-code';` to `import QRCode from 'react-qr-code';`.","cause":"Incorrect import statement. The `QRCode` component is a default export, but it's being imported as a named export.","error":"TypeError: (0, react_qr_code_1.default) is not a function"},{"fix":"Add a white or light-colored background with adequate padding around the `<QRCode />` component (e.g., `<div style={{ background: 'white', padding: '16px' }}><QRCode ... /></div>`). Also, ensure `fgColor` and `bgColor` props provide strong contrast.","cause":"Insufficient or missing 'quiet zone' (the clear space) around the QR code, or poor color contrast between foreground and background.","error":"QR code generated but is not scannable by common QR code readers."}],"ecosystem":"npm"}