A Blazor component for generating QR codes. This component encodes specified data into a QR code image, which can be customized in terms of size, colors, and error correction level. The QR code is generated as an SVG for optimal scalability and clarity.
MIT License
A Blazor component for generating QR codes. This component encodes specified data into a QR code image, which can be customized in terms of size, colors, and error correction level. The QR code is generated as an SVG for optimal scalability and clarity.
Check out the QRCode component on the demo site!
To install the package, you can either install with the following command:
Install-Package PinguApps.Blazor.QRCode
Or you can search in the Nuget package manager for PinguApps.Blazor.QRCode
.
Once the package is installed, you will want to add the following statement to your _Imports.razor
:
@using PinguApps.Blazor.QRCode
Now you can simply use the component:
<QRCode Data="My Data!" Size="150px" />
The data to be encoded into the QR code.
Type | Required? | Default Value |
---|---|---|
String | ❌ | string.Empty |
Sets the error correction level for the QR code, which enables it to be decoded even if partially damaged or obscured.
Type | Required? | Default Value | Possible Values |
---|---|---|---|
ErrorCorrection | ❌ | ErrorCorrection.Low |
ErrorCorrection.Low ErrorCorrection.Medium ErrorCorrection.Quartile ErrorCorrection.High
|
Sets the width and height of the generated SVG.
Type | Required? | Default Value | Possible Values |
---|---|---|---|
String | ❌ | 100% | Any valid html size for width & height |
The number of empty cells as padding around the QR code.
Type | Required? | Default Value |
---|---|---|
Int | ❌ | 1 |
Sets the foreground color of the QR code.
Type | Required? | Default Value | Possible Values |
---|---|---|---|
String | ❌ | #000000 | Any valid html color |
Sets the background color of the QR code.
Type | Required? | Default Value | Possible Values |
---|---|---|---|
String | ❌ | #ffffff | Any valid html color |
Provides an accessible description for the QR code, enhancing usability for screen reader users. This description is used as the aria-label attribute value of the QR code's SVG element, offering context or details about the QR code's content or purpose.
Type | Required? | Default Value |
---|---|---|
String | ❌ | QR Code |
Optional CSS class to be applied to the QR code.
Type | Required? | Default Value |
---|---|---|
String? | ❌ | null |
Optional ID to be applied to the QR code.
Type | Required? | Default Value |
---|---|---|
String? | ❌ | null |
aria-label
attribute value of the SVG element.