Registry / serialization / react-qr-code

react-qr-code

library2.0.18jsnpmunverified

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.

serialization

npm install react-qr-code

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-QR-CODE

react-qr-code

serializationjavascriptv2.0.18

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

QRCode

✓ import QRCode from 'react-qr-code';

✗ import { QRCode } from 'react-qr-code';

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.

QRCode

✓ const QRCode = require('react-qr-code');

✗ const { QRCode } = require('react-qr-code');

For CommonJS environments, `QRCode` is the default export. Destructuring from `require()` will not work correctly.

QRCodeProps

✓ import type { QRCodeProps } from 'react-qr-code';

TypeScript users can import the `QRCodeProps` interface to correctly type the component's properties.

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.

import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import QRCode from 'react-qr-code'; function App() { const [value, setValue] = useState('https://checklist.day'); return ( <div style={{ padding: '20px', backgroundColor: '#f0f0f0', display: 'flex', flexDirection: 'column', alignItems: 'center', minHeight: '100vh' }}> <h1>QR Code Generator</h1> <p>Enter text or a URL below to generate a QR code:</p> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} style={{ marginBottom: '20px', width: '300px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }} placeholder="Enter QR code content" /> {value && ( <div style={{ background: 'white', padding: '16px', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', display: 'inline-block' }}> <QRCode size={256} style={{ height: "auto", maxWidth: "100%", width: "100%" }} value={value} viewBox={`0 0 256 256`} level="H" fgColor="#333333" bgColor="#FFFFFF" /> </div> )} {!value && <p>Please enter some content to generate a QR code.</p>} <p style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>Scan this QR code with your device.</p> </div> ); } // Assuming a root HTML element with id='root' exists const rootElement = document.getElementById('root'); if (rootElement) { const root = ReactDOM.createRoot(rootElement); root.render(<App />); } else { console.error("No element with ID 'root' found to render the React app. Ensure your HTML has `<div id='root'></div>`."); }

Debug

Known issues

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

fix

Run `npm install react-native-svg` (or `yarn add react-native-svg`) and then `cd ios && pod install` for iOS projects.

affects: >=2.0.15

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

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

affects: >=1.0.0

gotchaThe `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`.

fix

Use `import QRCode from 'react-qr-code';` for ES modules or `const QRCode = require('react-qr-code');` for CommonJS environments.

affects: >=1.0.0

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

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.

affects: >=2.0.16

Errors

Common errors & fixes

Invariant Violation: View config not found for name 'RNSVGPath'. Are you sure this native component exists and was properly linked?

The `react-native-svg` library, which is essential for rendering QR codes in React Native, is not installed or linked correctly.

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

TypeError: (0, react_qr_code_1.default) is not a function

Incorrect import statement. The `QRCode` component is a default export, but it's being imported as a named export.

fix

Change your import statement from `import { QRCode } from 'react-qr-code';` to `import QRCode from 'react-qr-code';`.

QR code generated but is not scannable by common QR code readers.

Insufficient or missing 'quiet zone' (the clear space) around the QR code, or poor color contrast between foreground and background.

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.

Upgrade

Version history

2.0.18latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for any React-based application.

react-native-svgoptionalRequired for rendering QR codes in React Native environments, as the component uses SVG. Must be installed separately by the user.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/rosskhanas/react-qr-code ↗

packagehttps://www.npmjs.com/package/react-qr-code ↗