react-qr-code

react-qr-code turns any string value into a scannable QR code component for React and React Native apps. It computes the QR matrix with the qrcode-generator library, encodes text in UTF-8 byte mode so non-Latin scripts and emoji scan correctly, and renders the result as an inline SVG on web or as react-native-svg primitives on iOS and Android from the same import path.

The API is intentionally small: a single required value prop plus optional size, bgColor, fgColor, and level props with sensible defaults, and full passthrough of any additional props onto the rendered SVG element. Prebuilt CJS, ESM, and native bundles ship in the package, so consumers add no build step of their own.

What You Get

• A single <QRCode /> React component with TypeScript types (types/index.d.ts) declaring the full prop surface.
• Automatic platform resolution: the same import resolves to an SVG-based renderer on web and a react-native-svg-based renderer on iOS/Android.
• Prebuilt CJS, ESM, and native bundles (lib/index.js, lib/index.mjs, lib/index.native.js) generated via Rollup, so no build step is required by consumers.
• UTF-8-safe text encoding out of the box, so callers don’t need a separate encoding step for non-Latin text or emoji.

Common Use Cases

• App download and referral links surfaced as a scannable code on marketing pages.
• Payment URIs, vCards, or Wi-Fi credentials shared between a screen and a phone camera.
• Ticket, badge, and check-in codes generated per user for event or access-control flows.
• Device pairing and two-factor setup codes scanned by a companion mobile app.

Under The Hood

Architecture

The library has a single entry point, src/index.js, whose QRCode component is a stateless pipeline: it feeds value and level into qrcode-generator to produce a boolean matrix, walks that matrix into two SVG path-data strings (one for light cells, one for dark cells), and hands them to a separate QRCodeSvg rendering layer. That rendering layer exists in two parallel implementations, QRCodeSvg.js (a plain <svg>/<path> pair for web) and QRCodeSvg.native.js (react-native-svg’s <Svg>/<Path>), and Rollup’s @rollup/plugin-alias swaps one for the other when building the lib/index.native.js output. This cleanly separates platform-agnostic encoding from platform-specific markup, so the part most likely to break under a React Native SVG or browser SVG change is isolated to a single small file.

Tech Stack

The runtime dependency surface is intentionally minimal: qrcode-generator for QR matrix computation and prop-types for runtime prop validation, with react (and, for native consumers, react-native-svg) left as peer dependencies. The build pipeline is Babel (preset-env, preset-react) driving Rollup 4, producing CJS, ESM, and native CJS bundles wired up through package.json’s exports map (react-native/import/require/types conditions). Linting runs on ESLint 9’s flat config with eslint-plugin-react and eslint-plugin-import, formatting via Prettier, and releases are cut with release-it plus conventional-changelog. A separate Expo/React Native app under demo/ exercises both the web and native renderers manually.

Code Quality

No automated test suite exists in the repository — there are no *.test.* files, and verification of the native/web rendering paths is documented as a manual process using the demo/ app. Runtime prop validation is handled by prop-types rather than compile-time types in the source itself; the published TypeScript types (types/index.d.ts) are a hand-authored ambient module declaration layered on top of the plain JavaScript source, so they can drift from the implementation without a type-checking step to catch it. ESLint and Prettier are configured and enforced via lint script, and naming/prop-ordering conventions are consistent across the two component files, but the absence of any test coverage is the clearest quality gap.

API Design The public API is a single required value prop plus size, bgColor, fgColor, and level with defaults that work out of the box, and any additional props (style, aria attributes, an overriding viewBox) pass straight through to the rendered SVG element via forwardRef and prop spreading — the README documents concrete responsive-sizing and non-ASCII-text recipes built entirely on that passthrough. This keeps the barrier to first use very low, though the design itself — matrix-to-path-to-SVG — is the standard shape for QR React components and introduces nothing structurally new relative to comparable libraries in the ecosystem.