"use client";

import * as React from "react";
import { useEffect, useState } from "react";
import QRCode from "qrcode";

import { cn } from "@/lib/utils";

interface QrCodeProps {
  value: string;
  size?: number;
  level?: "L" | "M" | "Q" | "H";
  margin?: number;
  className?: string;
  label?: string;
}

export function QrCode({
  value,
  size = 160,
  level = "M",
  margin = 1,
  className,
  label = "QR code",
}: QrCodeProps) {
  const [svg, setSvg] = useState<string>("");

  useEffect(() => {
    let active = true;

    QRCode.toString(value, {
      type: "svg",
      width: size,
      margin,
      errorCorrectionLevel: level,
      color: {
        dark: "currentColor",
        light: "transparent",
      },
    })
      .then((result) => {
        if (active) {
          setSvg(result);
        }
      })
      .catch((error) => {
        console.error("Failed to generate QR code:", error);
      });

    return () => {
      active = false;
    };
  }, [value, size, level, margin]);

  return (
    <div
      className={cn(
        "inline-flex items-center justify-center overflow-hidden rounded-lg",
        "border border-border bg-card text-foreground",
        className
      )}
      style={{ width: size, height: size }}
      role="img"
      aria-label={label}
    >
      {svg ? (
        <div
          className="h-full w-full"
          dangerouslySetInnerHTML={{ __html: svg }}
        />
      ) : (
        <span className="text-xs text-muted-foreground">Generating</span>
      )}
    </div>
  );
}
QR Code

Dependencies

Files

Installation
