repository·trunk·Indexed 26 days ago
https://github.com/zpao/qrcode.reactA React component library for generating and rendering QR codes as SVG or Canvas elements. It provides QRCodeSVG and QRCodeCanvas components with support for custom colors, error correction levels, and embedded images via imageSettings. Version 4.2.0 supports optimized multi-segment encoding by passing an array of strings to the value prop.
getModules method on the QrCode class to improve performance by reducing calls to getModule.Install the qrcode.react package using npm to use the QR code generation components in your React application.
npm install qrcode.reactThe library exports two main components for rendering QR codes:
QRCodeSVG: Renders the QR code as an SVG element. This is generally recommended as it is more flexible and scalable.QRCodeCanvas: Renders the QR code using the HTML5 Canvas API.Both components accept the same set of props.
import ReactDOM from 'react-dom';
import {QRCodeSVG} from 'qrcode.react';
ReactDOM.render(
<QRCodeSVG value="https://reactjs.org/" />,
document.getElementById('mountNode')
);Use the imageSettings prop to embed a logo or image within the QR code. This works for both QRCodeSVG and QRCodeCanvas.
imageSettings properties:src: The URI of the image.height: Height in pixels.width: Width in pixels.excavate: If true, modules overlapping the image will use the bgColor, ensuring clean edges.x: Horizontal offset (pixels). Defaults to centered.y: Vertical offset (pixels). Defaults to centered.opacity: Opacity from 0 to 1. Defaults to 1.crossOrigin: The cross-origin value (e.g., 'anonymous', 'use-credentials', or '').Both QRCodeSVG and QRCodeCanvas accept several props to customize the generated QR code.
value: The data to encode. Can be a string or an array of strings (string[]) for optimized multi-segment encoding.size: The size in pixels. Defaults to 128.level: Error Correction Level. Options: 'L' (low, ~7%), 'M' (medium, ~15%), 'Q' (quartile, ~25%), 'H' (high, ~30%). Defaults to 'L'.bgColor: Background color (CSS color string). Defaults to #FFFFFF.fgColor: Foreground color (CSS color string). Defaults to #000000.title: Accessibility title for the QR code.marginSize: The number of modules to use for the margin. Defaults to 0. (Note: includeMargin is deprecated; use marginSize instead).minVersion: The minimum version (1-40) used when encoding. Defaults to 1.boostLevel: If true, the Error Correction Level may be higher than specified if it doesn't increase the version. Defaults to true.You can pass additional props (like className or style) which will be passed through to the underlying <svg> or <canvas> element.
value prop accepts an array of strings (string[]). Each member of the array is encoded as a separate segment. This allows the library to use optimized encoding paths (like Numeric or Alphanumeric modes) for individual segments, resulting in more efficient QR codes for certain data types.Both QRCodeSVG and QRCodeCanvas accept a set of props to customize the appearance and encoding of the QR code:
value: The data to encode. Can be a string or an array of strings string[] (to optimize segments).size: The size in pixels. Defaults to 128.level: Error Correction Level. Options: 'L', 'M', 'Q', 'H'. Defaults to 'L'.bgColor: Background color (CSS color value). Defaults to #FFFFFF.fgColor: Foreground color (CSS color value). Defaults to #000000.marginSize: The number of modules to use for the margin. Defaults to 0. (Note: includeMargin is deprecated; use marginSize instead).minVersion: The minimum version (1-40) to use for encoding. Defaults to 1.boostLevel: If true, the error correction level may be higher than specified if it doesn't increase the version. Defaults to true.title: An accessibility title for the QR code.imageSettings: Configuration for an embedded image (see Embed an image in a QR code).QRCodeCanvas component renders a QR code using the HTML5 Canvas API. This is useful for performance-heavy applications or when you need to export the QR code as a bitmap image. It supports all standard QR code properties and allows for embedding images.QRCodeSVG component renders a QR code as an SVG element. This is ideal for high-quality, scalable graphics that remain sharp at any zoom level. It supports all standard QR code properties and allows for embedding images.