qrcode.react

qrcode.react is a small, dependency-light React component library for rendering QR codes directly to the DOM. It ships two components, QRCodeSVG and QRCodeCanvas, so you can pick the output format that best fits your use case, and exposes props for size, error-correction level, colors, margins, and embedded logo images.

Built in TypeScript and bundling the well-known nayuki QR Code Generator, it encodes text and multi-segment values efficiently while staying tiny and tree-shakeable. It supports React 16.8 through 19, making it a stable choice for adding scannable codes to web apps.

What You Get

• Two ready-to-use components, QRCodeSVG and QRCodeCanvas, for SVG or Canvas rendering
• Full TypeScript typings for every prop, including the embedded image settings object
• Configurable error-correction levels (L, M, Q, H) with optional automatic level boosting
• Support for embedding a centered logo image with optional excavation of overlapping modules
• Custom foreground/background colors, sizes, margins, and pass-through of arbitrary DOM props

Common Use Cases

• Rendering QR codes that link to a website, app store listing, or landing page
• Generating codes for two-factor authentication (otpauth) setup screens
• Displaying scannable payment, ticket, or contact (vCard) codes in a dashboard
• Adding branded QR codes with an embedded company logo to marketing pages

Under The Hood

Architecture

The library is a single ~590-line module (src/index.tsx) that wraps the bundled nayuki QR Code Generator (src/third-party/qrcodegen/index.ts, ~980 lines). A shared useQRCode hook memoizes the encoded module matrix from the value, level, minVersion, and boostLevel props, mapping the string error-correction level through an ERROR_LEVEL_MAP into the generator’s Ecc enum. Two forwardRef components consume that matrix: QRCodeSVG builds an SVG <path> string (via generatePath) plus an optional <image> node, while QRCodeCanvas imperatively paints the matrix with useEffect onto a device-pixel-scaled <canvas>, loading any embedded image through an internal <img> ref. Shared helpers like excavateModules and getImageSettings compute the logo cut-out geometry for both paths.

Tech Stack

Written in TypeScript targeting ES2017 for the browser platform. The only runtime dependency is the vendored nayuki qrcodegen; React (16.8–19) is a peer dependency. It is bundled with tsup into dual CommonJS and ESM outputs with generated .d.ts type declarations, is marked sideEffects: false for tree-shaking, and ships only the lib directory. Tooling includes ESLint, Prettier, and a Makefile-driven build.

Code Quality

The code is cleanly typed with explicit prop types and JSDoc on every field. Tests live in src/__test__/index.test.tsx using Jest, jsdom, and Testing Library, including snapshot coverage of rendered output. Naming is descriptive (SUPPORTS_PATH2D, excavateModules, getImageSettings) and rendering concerns are separated between the SVG and Canvas components while sharing encoding logic, keeping the module coherent despite its size.

API Design The public surface is intentionally minimal: two named exports whose props are a superset of the underlying DOM element’s attributes, so className, style, and other attributes pass straight through. Sensible defaults (size 128, level L, standard colors) mean <QRCodeSVG value="..." /> works with a single prop, while the nested imageSettings object cleanly scopes the more advanced logo-embedding options. The README documents every prop with type and default in table form.