qr-code

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