Pick a component

QR Code Generator

Generates a QR Code.

<QRCode value="https://nns.ic0.app/" ariaLabel="Network Nervous System">
  <img
    src="./img/logo.svg"
    role="presentation"
    alt="Test logo"
    loading="lazy"
    slot="logo"
  />
</QRCode>

Library

This component uses the library qr-creator.

Properties

Property Description Type Default
ariaLabel An accessible label for the QR code. If undefined the value is use as fallback. string or undefined undefined
value A value to be encoded within the QR code. On change the QR code is re-drawed. string
fillColor The fill color (“the color of the small squares”). string black
backgroundColor The background color of the QR code. string white
radius Radius. number 0
ecLevel The error correction level. See https://www.qrcode.com/en/about/error_correction.html. L or M or Q or H H

Styling

The component fits the available space where it is used. Therefore, the parents should be rendered before mounting this component.

Slots

Slot name Description
logo An optional logo displayed over the QR code.

Showcase