QRCode

Installation

npx vayu-ui-cli@latest add qrcode

Usage

<QRCode value="https://example.com" />

<QRCode value="https://example.com" size="sm" />
<QRCode value="https://example.com" size="md" />
<QRCode value="https://example.com" size="lg" />

<QRCode
  value="https://example.com"
  bgColor="#18181b"
  fgColor="#a3e635"
/>

<QRCode
  value="https://example.com"
  size="lg"
  level="H"
  imageSettings={{
    src: "/logo.png",
    width: 50,
    height: 50,
    excavate: true,
  }}
/>

<QRCode value="https://example.com" includeMargin={false} />

<QRCode value="" />

Anatomy

import { QRCode } from 'vayu-ui';

<QRCode value="https://example.com" />;

• QRCode — Single component that renders an SVG-based QR code. Handles encoding, module placement, masking, and optional center logo overlay internally.

Accessibility

• Keyboard Support: Not applicable. QRCode is a static image element with no interactive controls.
• ARIA Attributes:
  • role="img" applied to the root container for proper semantic meaning.
  • aria-label auto-generated as QR code for: the encoded value when populated.
  • Empty state receives aria-label="Empty QR code".
• Focus Behavior: The component is non-interactive. It uses role="img" so screen readers treat it as a decorative/informational image.

Screen reader behavior

When encountering a populated QRCode, the screen reader announces it as an image with the label "QR code for: {encoded value}". For example, with value="https://example.com", the screen reader announces: "QR code for: https://example.com, image". If a custom aria-label is provided, it overrides the default. When the value is empty, the screen reader announces: "Empty QR code, image". The SVG content inside is not individually traversed by screen readers since the parent div has role="img".

Component Folder Structure

QRcode/
├── QRCode.tsx    # React component with SVG rendering, logo overlay, and color resolution
├── QREncoder.ts  # Pure TypeScript QR encoding engine (byte mode, versions 1-40)
├── types.ts      # Shared type definitions (ErrorCorrectionLevel, QRCodeImageSettings)
├── index.ts      # Public API re-exports
└── README.md     # Component usage reference

Props

QRCode

QRCodeImageSettings