Qrcode img

[dkackman]

To support copying and sharing qrcodes use an img element instead of div

https://discord.com/channels/1220144003874553986/1220144004826533900/1444655547067535522

[Copilot]

Pull request overview

This PR refactors the StyledQRCode component to render QR codes as <img> elements instead of <div> elements to enable better copying and sharing functionality. The change involves generating QR code data as blobs, converting them to object URLs, and using those URLs as the image source.

Key changes:

• Converted from DOM manipulation (appending to div) to async blob-based rendering with img element
• Added blob-to-URL conversion utility and state management for image source
• Consolidated two separate useEffect hooks into one for QR code generation and updates

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The eslint-disable-next-line react-hooks/exhaustive-deps comment is used to suppress warnings about missing dependencies, but some dependencies (qrOptions, imageOptions, dotsOptions, backgroundOptions) are genuinely missing from the dependency array.

Instead of disabling the rule, either:

1. Add all the missing dependencies to the array, or
2. Add a comment explaining why specific dependencies are intentionally omitted (though in this case they should not be omitted)

This disable comment may be masking the real issue identified in the earlier comment about missing dependencies.

Suggested change

	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [type, shape, width, height, margin, data, restKey, mimeType]);
	}, [type, shape, width, height, margin, data, qrOptions, imageOptions, dotsOptions, backgroundOptions, restKey, mimeType]);

[dkackman]

lol