custom-qrcode-browser
v0.0.3
Published
[![Continuous Integrations](https://github.com/CyrilDesch/custom-qrcode-browser/actions/workflows/continuous-integrations.yaml/badge.svg?branch=main)](https://github.com/CyrilDesch/custom-qrcode-browser/actions/workflows/continuous-integrations.yaml) [![L
Downloads
81
Readme
Custom QrCode Browser
Library to generate high customizable QR code in browser. Available for Angular and React in browser environment.
Fast, lightweight, and easy to use. Use HTML5 and SVG to render QR code instantly. Optimize by Google closure compiler.
How to use
Angular
- Create a qrcode.component.ts :
import {
Component,
type ElementRef,
Input,
type OnChanges,
type SimpleChanges,
ViewChild,
} from "@angular/core";
import {
QrCodeGenerator,
QrOptionsBuilder,
type QrData,
type QrOptions,
} from "../../../src";
@Component({
selector: "app-qr-code",
})
export class QrCodeComponent implements OnChanges {}
@Component({
selector: "app-custom-qr-code",
standalone: true,
imports: [],
templateUrl: "./custom-qr-code.component.html",
styleUrl: "./custom-qr-code.component.scss",
})
export class CustomQrCodeComponent implements OnChanges {
@Input() data!: QrData;
@Input() options: QrOptions = new QrOptionsBuilder().build();
@ViewChild("svgElement", { static: true })
svgElement!: ElementRef<SVGSVGElement>;
constructor() {}
ngOnChanges(changes: SimpleChanges): void {
if (changes["data"] || changes["options"]) {
this.generateQrCode();
}
}
private generateQrCode(): void {
if (this.svgElement && this.svgElement.nativeElement) {
const qrCodeCore = QrCodeGenerator(
this.svgElement.nativeElement,
this.data,
this.options,
);
qrCodeCore.generateSvg();
}
}
}
License
Released under MIT License.