Fix QRCodeCanvas: guard against empty value and null context

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-06-16 16:17:56 +07:00
parent 8d273428f3
commit 6ba5dc1187

View file

@ -12,21 +12,14 @@ export function QRCodeCanvas({ value, size = 256, level = 'M', className }: QRCo
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => { useEffect(() => {
if (!canvasRef.current) return; if (!canvasRef.current || !value || value.length < 4) return;
const el = canvasRef.current;
QRCode.toCanvas( try {
canvasRef.current, QRCode.toCanvas(el, value, { width: size, margin: 1, errorCorrectionLevel: level });
value, } catch {
{ // silently skip on invalid input
width: size,
margin: 1,
errorCorrectionLevel: level,
},
(error) => {
if (error) console.error('QR Code generation error:', error);
} }
);
}, [value, size, level]); }, [value, size, level]);
return <canvas ref={canvasRef} className={className} />; return <canvas ref={canvasRef} width={size} height={size} className={className} />;
} }