Feat: QrCode Component #1731
Feat: QrCode Component #1731
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| startColor: '#0052ff', | ||
| endColor: '#b2cbff', | ||
| }, | ||
| }; |
There was a problem hiding this comment.
is it possible to make all of these pull from theme colors so when a user customizes a theme (or adds their own) the qr code adapts?
There was a problem hiding this comment.
Agreed - we should avoid having to update this file when adding new themes.
Has the QR component been tested with custom themes? Curious if it's updating as expected.
| gradientType?: 'radial' | 'linear'; | ||
| }; | ||
|
|
||
| export function QrCodeSvg({ |
| if (React.isValidElement(logo)) { | ||
| logo = `data:image/svg+xml;charset=utf-8,${encodeURIComponent( | ||
| ReactDOMServer.renderToString(logo), | ||
| )}`; |
There was a problem hiding this comment.
can't we just display the "logo"? what happens if an <img/> tag is passed in or a text node?
| value: string; | ||
| size?: number; | ||
| backgroundColor?: string; | ||
| logo?: React.ReactNode; | ||
| logoSize?: number; | ||
| logoBackgroundColor?: string; | ||
| logoMargin?: number; | ||
| logoBorderRadius?: number; | ||
| quietZone?: number; | ||
| quietZoneBorderRadius?: number; | ||
| ecl?: 'L' | 'M' | 'Q' | 'H'; | ||
| gradientType?: 'radial' | 'linear'; |
There was a problem hiding this comment.
I know many of these are optional but curious if we even need all of these props - do we want this low level of customization for a QR code? I imagine that a few of these params will always stay the same and therefore we can just default in the func and cleanup the amount of props used
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z" | ||
| fill="white" |
There was a problem hiding this comment.
Should this adapt to theming?
What changed? Why?
Default
Base
Cyberpunk
Hacker
Notes to reviewers
How has it been tested?
locally, and with test coverage