Blazorise QR Code component

A component used to generate QR codes.

QR codes are great for presenting short amounts of information to people who can scan them rapidly with their smartphones. Because most smartphones come with built-in QR code scanners, simply pointing the camera at a QR code will decode it, allowing the user to browse a website, dial a phone number, read a message, and so on.

Installation

Install-Package Blazorise.QRCode

@using Blazorise.QRCode

Examples

Basic

To generate a QR code you only need to define a Value parameter.

<QRCode Value="https://blazorise.com" Alt="QRCode image" />

Color

Use the DarkColor and LightColor attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.

<QRCode Value="https://blazorise.com" Alt="QRCode image" DarkColor="#7474ed" />

Error Correction

QR codes can be rendered with various levels of error correction that can be set using the EccLevel attribute. This example generates four codes with the same value using different error correction levels.

<QRCode Value="https://blazorise.com" Alt="QRCode image" EccLevel="EccLevel.L" PixelsPerModule="4" />
<QRCode Value="https://blazorise.com" Alt="QRCode image" EccLevel="EccLevel.M" PixelsPerModule="4" />
<QRCode Value="https://blazorise.com" Alt="QRCode image" EccLevel="EccLevel.Q" PixelsPerModule="4" />
<QRCode Value="https://blazorise.com" Alt="QRCode image" EccLevel="EccLevel.H" PixelsPerModule="4" />

Best Practices

Set the Alt property

To optimize your web for SEO, define the Alt parameter to describe the QR image content, eg. Alt="QRCode image".

Attributes