@sec-ant/wc-qr-code

A <qr-code> web component powered by Lit.

Install

npm i @sec-ant/wc-qr-code

Usage

This package does not bundle dependencies inside it, and is designed to be used with a build tool. For further information on this design decision, please check this link.

This packages exports 3 import paths: @sec-ant/wc-qr-code/pure, @sec-ant/wc-qr-code/side-effects and @sec-ant/wc-qr-code.

@sec-ant/wc-qr-code/pure

This subpath exports the QrCodeElement class. You'll have to manually register it on the CustomElementRegistry to use the web component.

In your script:

import { QrCodeElement } from "@sec-ant/wc-qr-code/pure";

customElements.define("qr-code", QrCodeElement);

Afterwards, in your html file:

<qr-code value="Hello World!"></qr-code>

Before https://github.com/WICG/webcomponents/issues/716 is resolved, you'll have to handle possible tag name collisions yourself.

If you use Typescript and wants document.createElement("qr-code") to infer the QrCodeElement type for you, you should create a declaration file to augment the types:

declare global {
  interface HTMLElementTagNameMap {
    "qr-code": QrCodeElement;
  }
}

@sec-ant/wc-qr-code/side-effects

This subpath will automatically register QrCodeElement on the CustomElementRegistry with the tag name qr-code, only if the tag name qr-code isn't already registered. HTMLElementTagNameMap will be automatically augmented.

In your script:

import "@sec-ant/wc-qr-code/side-effects";

Afterwards, in your html file:

<qr-code value="Hello World!"></qr-code>

@sec-ant/wc-qr-code

This works just like side-effects but also exports the QrCodeElement class.

Attributes

value

The value of the encoded QR code.

Default: ""

ecc

Error correction code level. Case-insensitive.

• "l" or "low"
• "m" or "medium"
• "q" or "quartile"
• "h" or "high"

Default: "low"

border

Size of the quiet zone in module blocks.

Default: "4"

scale

Size of one module block in pixels.

Default: "8"

light-color

The color of light module blocks.

Default: "#fff"

dark-color

The color of dark module blocks.

Default: "#000"