qr-code

1"use client";
2 
3import { formatHex, oklch } from "culori";
4import QR from "qrcode";
5import { type HTMLAttributes, useEffect, useState } from "react";
6import { cn } from "@/lib/utils";
7 
8export type QRCodeProps = HTMLAttributes<HTMLDivElement> & {
9  data: string;
10  foreground?: string;
11  background?: string;
12  robustness?: "L" | "M" | "Q" | "H";
13};
14 
15const oklchRegex = /oklch\(([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\)/;
16 
17const getOklch = (color: string, fallback: [number, number, number]) => {
18  const oklchMatch = color.match(oklchRegex);
19 
20  if (!oklchMatch) {
21    return { l: fallback[0], c: fallback[1], h: fallback[2] };
22  }
23 
24  return {
25    l: Number.parseFloat(oklchMatch[1]),
26    c: Number.parseFloat(oklchMatch[2]),
27    h: Number.parseFloat(oklchMatch[3]),
28  };
29};
30 
31export const QRCode = ({
32  data,
33  foreground,
34  background,
35  robustness = "M",
36  className,
37  ...props
38}: QRCodeProps) => {
39  const [svg, setSVG] = useState<string | null>(null);
40 
41  useEffect(() => {
42    const generateQR = async () => {
43      try {
44        const styles = getComputedStyle(document.documentElement);
45        const foregroundColor =
46          foreground ?? styles.getPropertyValue("--foreground");
47        const backgroundColor =
48          background ?? styles.getPropertyValue("--background");
49 
50        const foregroundOklch = getOklch(
51          foregroundColor,
52          [0.21, 0.006, 285.885]
53        );
54        const backgroundOklch = getOklch(backgroundColor, [0.985, 0, 0]);
55 
56        const newSvg = await QR.toString(data, {
57          type: "svg",
58          color: {
59            dark: formatHex(oklch({ mode: "oklch", ...foregroundOklch })),
60            light: formatHex(oklch({ mode: "oklch", ...backgroundOklch })),
61          },
62          width: 200,
63          errorCorrectionLevel: robustness,
64          margin: 0,
65        });
66 
67        setSVG(newSvg);
68      } catch (err) {
69        console.error(err);
70      }
71    };
72 
73    generateQR();
74  }, [data, foreground, background, robustness]);
75 
76  if (!svg) {
77    return null;
78  }
79 
80  return (
81    <div
82      className={cn("size-full", "[&_svg]:size-full", className)}
83      // biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for SVG"
84      dangerouslySetInnerHTML={{ __html: svg }}
85      {...props}
86    />
87  );
88};