qr-code

1"use client";
2 
3import { Slot as SlotPrimitive } from "radix-ui";
4import * as React from "react";
5import { useComposedRefs } from "@/lib/compose-refs";
6import { cn } from "@/lib/utils";
7import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
8 
9const ROOT_NAME = "QRCode";
10const CANVAS_NAME = "QRCodeCanvas";
11const SVG_NAME = "QRCodeSvg";
12const IMAGE_NAME = "QRCodeImage";
13const SKELETON_NAME = "QRCodeSkeleton";
14 
15type QRCodeLevel = "L" | "M" | "Q" | "H";
16 
17interface QRCodeCanvasOpts {
18  errorCorrectionLevel: QRCodeLevel;
19  type?: "image/png" | "image/jpeg" | "image/webp";
20  quality?: number;
21  margin?: number;
22  color?: {
23    dark: string;
24    light: string;
25  };
26  width?: number;
27  rendererOpts?: {
28    quality?: number;
29  };
30}
31 
32interface StoreState {
33  dataUrl: string | null;
34  svgString: string | null;
35  isGenerating: boolean;
36  error: Error | null;
37  generationKey: string;
38}
39 
40interface Store {
41  subscribe: (callback: () => void) => () => void;
42  getState: () => StoreState;
43  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
44  setStates: (updates: Partial<StoreState>) => void;
45  notify: () => void;
46}
47 
48interface QRCodeContextValue {
49  value: string;
50  size: number;
51  margin: number;
52  level: QRCodeLevel;
53  backgroundColor: string;
54  foregroundColor: string;
55  canvasRef: React.RefObject<HTMLCanvasElement | null>;
56}
57 
58const StoreContext = React.createContext<Store | null>(null);
59 
60function useStore<T>(selector: (state: StoreState) => T): T {
61  const store = React.useContext(StoreContext);
62  if (!store) {
63    throw new Error(`\`useQRCode\` must be used within \`${ROOT_NAME}\``);
64  }
65 
66  const getSnapshot = React.useCallback(
67    () => selector(store.getState()),
68    [store, selector],
69  );
70 
71  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
72}
73 
74const QRCodeContext = React.createContext<QRCodeContextValue | null>(null);
75 
76function useQRCodeContext(consumerName: string) {
77  const context = React.useContext(QRCodeContext);
78  if (!context) {
79    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
80  }
81  return context;
82}
83 
84interface QRCodeProps extends Omit<React.ComponentProps<"div">, "onError"> {
85  value: string;
86  size?: number;
87  level?: QRCodeLevel;
88  margin?: number;
89  quality?: number;
90  backgroundColor?: string;
91  foregroundColor?: string;
92  onError?: (error: Error) => void;
93  onGenerated?: () => void;
94  asChild?: boolean;
95}
96 
97function QRCode(props: QRCodeProps) {
98// … truncated