@kit-ng-ui/qrcode

QR code display component with status overlays. Mirrors ant-design's <QRCode> API.

⚠️ Placeholder encoder — not yet scannable

The current matrix generator produces a visually QR-like pattern derived from a hash of value. The corner finders, separators, and timing patterns are correctly placed, but the data region is not a valid byte-mode encoding with Reed–Solomon error correction. Cameras will not decode it.

Do not use this component in scan-required flows (e.g. log-in by QR, payment, verification) until the encoder is replaced. The public component API is stable; the encoder will be swapped in place without breaking consumers. In dev mode the component emits a console.warn once per app as a reminder.

Install

pnpm add @kit-ng-ui/qrcode

@use '@kit-ng-ui/qrcode/styles';

Example

<kit-qrcode value="https://chimlon.app" />
<kit-qrcode value="…" status="expired" (refresh)="rotate()" />
<kit-qrcode value="…" [icon]="logoUrl" />

API

| Input | Type | Default | | ------------- | ------------------------------------------------------ | ----------- | | value | string | required | | size | number | 160 | | color | string | '#000' | | bgColor | string | '#fff' | | bordered | boolean | true | | errorLevel | 'L' \| 'M' \| 'Q' \| 'H' | 'M' | | status | 'active' \| 'expired' \| 'loading' \| 'scanned' | 'active' | | type | 'canvas' \| 'svg' | 'svg' | | icon | string \| null | null | | iconSize | number | 40 |

| Output | Type | Description | | --------- | --------- | -------------------------------------- | | refresh | void | Emitted when the user clicks "Refresh" in the expired overlay. |