or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-qrcode-react

React components for generating customizable QR codes with SVG and Canvas rendering options

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/qrcode.react@4.2.x

To install, run

npx @tessl/cli install tessl/npm-qrcode-react@4.2.0

QR Code React

QR Code React is a React component library for generating customizable QR codes. It provides two rendering options (SVG and Canvas) with comprehensive customization including colors, sizes, error correction levels, margins, and embedded image support.

Package Information

Package Name: qrcode.react
Package Type: npm
Language: TypeScript
Installation: npm install qrcode.react

Core Imports

import { QRCodeSVG, QRCodeCanvas } from "qrcode.react";

For CommonJS:

const { QRCodeSVG, QRCodeCanvas } = require("qrcode.react");

Basic Usage

import React from "react";
import { QRCodeSVG, QRCodeCanvas } from "qrcode.react";

// Basic SVG QR code
function BasicSVGExample() {
  return <QRCodeSVG value="https://reactjs.org/" />;
}

// Basic Canvas QR code
function BasicCanvasExample() {
  return <QRCodeCanvas value="https://reactjs.org/" />;
}

// Customized QR code with image
function CustomizedExample() {
  return (
    <QRCodeSVG
      value="https://example.com"
      size={256}
      bgColor="#ffffff"
      fgColor="#000000"
      level="M"
      marginSize={4}
      imageSettings={{
        src: "https://example.com/logo.png",
        height: 32,
        width: 32,
        excavate: true
      }}
    />
  );
}

Architecture

QR Code React is built around several key components:

Dual Rendering: SVG and Canvas components for different use cases and performance needs
Props Interface: Unified prop system with component-specific extensions for DOM attributes
QR Generation: Integrated QR Code Generator library for efficient code generation
Image Embedding: Support for logo/image overlay with excavation and positioning
Type Safety: Full TypeScript support with comprehensive type definitions
React Integration: Forward ref support and standard React patterns

Capabilities

SVG QR Code Rendering

SVG-based QR code component providing scalable vector rendering with full customization options.

const QRCodeSVG: React.ForwardRefExoticComponent<
  QRPropsSVG & React.RefAttributes<SVGSVGElement>
>;

Canvas QR Code Rendering

Canvas-based QR code component optimized for high-density displays with pixel-perfect rendering.

const QRCodeCanvas: React.ForwardRefExoticComponent<
  QRPropsCanvas & React.RefAttributes<HTMLCanvasElement>
>;

QR Code Properties

Base props interface shared by both QR code components.

interface QRProps {
  /** The value to encode into the QR Code. Array of strings for optimized multi-segment encoding */
  value: string | string[];
  /** Size in pixels to render the QR Code (default: 128) */
  size?: number;
  /** Error correction level (default: 'L') */
  level?: ErrorCorrectionLevel;
  /** Background color for the QR Code (default: '#FFFFFF') */
  bgColor?: string;
  /** Foreground color for the QR Code (default: '#000000') */
  fgColor?: string;
  /** @deprecated Use marginSize instead. Whether to include 4-module margin (default: false) */
  includeMargin?: boolean;
  /** Number of modules for margin, overrides includeMargin (default: 0) */
  marginSize?: number;
  /** Title for accessibility */
  title?: string;
  /** Minimum QR version 1-40, higher = more complex (default: 1) */
  minVersion?: number;
  /** Allow higher error correction if possible without increasing version (default: true) */
  boostLevel?: boolean;
  /** Settings for embedded image/logo */
  imageSettings?: ImageSettings;
}

Error Correction Levels

QR code error correction level options.

type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';

'L' - Low (~7% error correction)
'M' - Medium (~15% error correction)
'Q' - Quartile (~25% error correction)
'H' - High (~30% error correction)

Image Settings

Configuration for embedding images or logos in QR codes.

interface ImageSettings {
  /** URI of the embedded image */
  src: string;
  /** Height of the image in pixels */
  height: number;
  /** Width of the image in pixels */
  width: number;
  /** Whether to excavate (clear) modules behind the image */
  excavate: boolean;
  /** Horizontal offset in pixels, centers if not specified */
  x?: number;
  /** Vertical offset in pixels, centers if not specified */
  y?: number;
  /** Image opacity 0-1 (default: 1) */
  opacity?: number;
  /** Cross-origin attribute for image loading */
  crossOrigin?: CrossOrigin;
}

Cross-Origin Options

Cross-origin attribute values for image loading in QR codes.

type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;

Component-Specific Props

Props types for individual QR code components that extend base QRProps with DOM attributes.

type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;

type QRPropsSVG = QRProps & React.SVGAttributes<SVGSVGElement>;

Usage Examples

Multi-Segment Encoding

Optimize QR code size by using multiple segments:

import { QRCodeSVG } from "qrcode.react";

function MultiSegmentExample() {
  return (
    <QRCodeSVG
      value={["WIFI:", "S:MyNetwork;", "T:WPA;", "P:password123;", ";"]}
      size={200}
      level="M"
    />
  );
}

Custom Styling with CSS

Apply custom styles using className and style props:

import { QRCodeSVG } from "qrcode.react";

function StyledExample() {
  return (
    <QRCodeSVG
      value="https://example.com"
      size={150}
      className="qr-code"
      style={{
        border: "2px solid #333",
        borderRadius: "8px",
        padding: "16px"
      }}
    />
  );
}

High Error Correction with Logo

Use higher error correction when embedding logos:

import { QRCodeCanvas } from "qrcode.react";

function LogoExample() {
  return (
    <QRCodeCanvas
      value="https://company.com"
      size={300}
      level="H" // High error correction for logo overlay
      bgColor="#f8f9fa"
      fgColor="#212529"
      marginSize={4}
      imageSettings={{
        src: "/company-logo.png",
        height: 60,
        width: 60,
        excavate: true,
        opacity: 0.9,
        crossOrigin: "anonymous"
      }}
    />
  );
}

Canvas with Forward Ref

Access canvas element for data extraction:

import React, { useRef, useCallback } from "react";
import { QRCodeCanvas } from "qrcode.react";

function CanvasRefExample() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const downloadQRCode = useCallback(() => {
    if (canvasRef.current) {
      const url = canvasRef.current.toDataURL();
      const link = document.createElement('a');
      link.download = 'qrcode.png';
      link.href = url;
      link.click();
    }
  }, []);

  return (
    <div>
      <QRCodeCanvas
        ref={canvasRef}
        value="https://example.com"
        size={256}
      />
      <button onClick={downloadQRCode}>Download QR Code</button>
    </div>
  );
}

Responsive QR Code

Create responsive QR codes that scale with container:

import React, { useState, useEffect } from "react";
import { QRCodeSVG } from "qrcode.react";

function ResponsiveExample() {
  const [size, setSize] = useState(200);

  useEffect(() => {
    const handleResize = () => {
      const container = document.getElementById('qr-container');
      if (container) {
        const containerWidth = container.offsetWidth;
        setSize(Math.min(containerWidth - 32, 400)); // Max 400px with 16px padding
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // Initial size

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div id="qr-container" style={{ width: '100%', padding: '16px' }}>
      <QRCodeSVG
        value="https://example.com"
        size={size}
        style={{ maxWidth: '100%', height: 'auto' }}
      />
    </div>
  );
}