Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sec-ant/wc-qr-code
A <qr-code> web component powered by Lit
https://github.com/sec-ant/wc-qr-code
lit qr-code qrcode web-component
Last synced: 3 months ago
JSON representation
A <qr-code> web component powered by Lit
- Host: GitHub
- URL: https://github.com/sec-ant/wc-qr-code
- Owner: Sec-ant
- License: mit
- Created: 2023-08-14T16:15:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-25T01:57:02.000Z (7 months ago)
- Last Synced: 2024-10-14T02:03:03.763Z (3 months ago)
- Topics: lit, qr-code, qrcode, web-component
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@sec-ant/wc-qr-code/v/latest
- Size: 237 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @sec-ant/wc-qr-code
[](https://github.com/Sec-ant/wc-qr-code/actions/workflows/release.yml)
A `` web component powered by [Lit](https://lit.dev/).
## Install
```bash
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](https://lit.dev/docs/tools/publishing/#don't-bundle-minify-or-optimize-modules).
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`](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry) to use the web component.
In your script:
```ts
import { QrCodeElement } from "@sec-ant/wc-qr-code/pure";
customElements.define("qr-code", QrCodeElement);
```
Afterwards, in your html file:
```html
```
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:
```ts
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:
```ts
import "@sec-ant/wc-qr-code/side-effects";
```
Afterwards, in your html file:
```html
```
### `@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"