{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-qr-code"],"cli":null},"imports":["import QRCode from 'react-qr-code';","const QRCode = require('react-qr-code');","import type { QRCodeProps } from 'react-qr-code';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}