search

zpao / qrcode.react

A <QRCode/> component for use with React.
https://zpao.github.io/qrcode.react/
Other
3.87k stars 333 forks source link

type(QRProps): Support string type for size #338

Closed thinkasany closed 7 months ago

thinkasany commented 7 months ago

The size of QRProps can be used with string type '100%', would like to take this pr, thanks a lot.

image

zpao commented 7 months ago

I'm going to let CI run mostly so the failures are obvious. Please build and test changes before submitting.

But there are a dozen issues with the change as is. size is used throughout as a number and you cannot just change the type in one place and hope for the best. You'd need to do a lot to make number | string work. Canvas and SVG also have different considerations. Canvas is not vector based and can't just scale. In fact we specifically figure out pixel density of your screen when rendering to make it look good.

Now that said, you can use CSS to style what we render. We'll pass style and className and anything else through. I call this out in the readme with this very use case in mind. That comes with risks as mentioned with Canvas, but in your case with using SVG, just pass <QRCodeSVG {...realProps} style={{width: '100%', height: '100%'}} />.

I modified the example code to show you:

image

You can actually see what it does to Canvas as well to illustrate my point:

image

While this proposed change isn't going to work I do appreciate you thinking about it and sending a PR. If there's anything else you may want or need out of this package, I'd love to hear.