PairingQrCode.tsx

999 B · raw
1import { BarcodeFormat, QRCodeWriter } from "@zxing/library";23export interface PairingQrCodeProps {4  value: string;5  size?: number;6}78/** Render a QR as native SVG so no invitation bytes touch a canvas export. */9export function PairingQrCode(props: PairingQrCodeProps) {10  const matrix = new QRCodeWriter().encode(11    props.value,12    BarcodeFormat.QR_CODE,13    0,14    0,15    new Map(),16  );17  const path: string[] = [];18  for (let y = 0; y < matrix.getHeight(); y++) {19    for (let x = 0; x < matrix.getWidth(); x++) {20      if (matrix.get(x, y)) path.push(`M${x} ${y}h1v1h-1z`);21    }22  }23  const size = props.size ?? 236;24  return (25    <svg26      class="peach-pair-qr"27      viewBox={`0 0 ${matrix.getWidth()} ${matrix.getHeight()}`}28      width={size}29      height={size}30      role="img"31      aria-label="Peach pairing QR code"32      shape-rendering="crispEdges"33    >34      <rect width="100%" height="100%" fill="#fff" />35      <path d={path.join("")} fill="#000" />36    </svg>37  );38}