QR Code
A component for generating and displaying QR codes with customizable styling and frame handles.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Basic
Large Size
Custom Frame Handles
With Gradient Scan
Dynamic Value Update
With Custom Options
Full Featured
Medium Size
Large with Gradient
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | required | The value to encode in the QR code |
size | 'md' | 'lg' | 'md' | The size of the QR code |
options | QRCodeStylingOptions | undefined | Additional options to customize the QR code styling |
class | string | undefined | Additional CSS classes to apply to the root element |
Slots
| Slot | Description |
|---|---|
top-left | Slot for the top-left frame handle |
top-right | Slot for the top-right frame handle |
bottom-right | Slot for the bottom-right frame handle |
bottom-left | Slot for the bottom-left frame handle |
overlay | Slot for overlay content (like gradient scan) |
Sub-Components
Frame Handle
The UiQRCodeFrameHandle component is used to display the corner handles of the QR code. It can be customized or hidden using the named slots.
Gradient Scan
The UiQRCodeGradientScan component creates a gradient scanning effect overlay on the QR code, commonly seen in modern QR code designs.
Notes
- The QR code uses the qr-code-styling library for generation and rendering
- QR codes are rendered as SVG for scalability and crisp rendering
- All size variants are responsive and accessible
- The component automatically updates when the
valueprop oroptionschange