QRCodeTS

QRCodeTS is a TypeScript re-implementation and packaging of the original QRCodeJS library.

It allows you to generate QR codes with various customizable options.

Installation

To install the package:

npm i @forward-software/qrcodets

Usage

You can import and use QRCodeTS in your project as follows

Render using HTML API (DOM or Canvas)

import { QRCode, HTMLRenderer as HTML } from "@forward-software/qrcodets";

new QRCode("https://example.com", {
  type: 4,
  correctionLevel: "H",
  size: 256,
  colorDark: "#000000",
  colorLight: "#ffffff",
}).renderTo(HTML(document.getElementById("qrcode")));

Render using an SVG

import { QRCode, SVGRenderer as SVG } from "@forward-software/qrcodets";

new QRCode("https://example.com", {
  type: 4,
  correctionLevel: "H",
  size: 256,
  colorDark: "#000000",
  colorLight: "#ffffff",
}).renderTo(SVG(document.getElementById("qrcode")));

Fluent API

import { QRCode, HTMLRenderer as HTML } from "@forward-software/qrcodets";

QRCode.from("https://example.com")
  .withOptions({ correctionLevel: "H", size: 256 })
  .renderTo(HTML(document.getElementById("qrcode")));

Options

Name	Type	Description	Default
size	Number	The physical size of the QR Code in pixels.	256
colorDark	String	The color of the dark modules (QR Code pixels). Accepts any valid CSS color string.	"#000000"
colorLight	String	The color of the light modules (background). Accepts any valid CSS color string.	"#ffffff"
type	Number	The QR Code version/type number (1-40). Higher values increase the size and data capacity of the QR Code. NOTE: If not set, the library will try to compute it based on content size.	undefined
correctionLevel	QRCodeErrorCorrectionLevel	The error correction level of the QR Code.	"H"

QRCodeErrorCorrectionLevel

The error correction level of a QR Code

Value	Description
"L"	(Low): ~7% error correction
"M"	(Medium): ~15% error correction
"Q"	(Quartile): ~25% error correction
"H"	(High): ~30% error correction

Migrating from QRCodeTS by lilRedaka?

You can replace QRCodeTS by lilRedaka and keep using the same code as before by importing and using the QRCodeCompat compatibility class in your project.

import { QRCodeCompat as QRCode, QRErrorCorrectLevel } from "@forward-software/qrcodets";

const params = {
  id: "qrcode",
  element: document.getElementById("qrcode"),
  width: 256,
  height: 256,
  typeNumber: 4,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRErrorCorrectLevel.H,
  text: "https://example.com",
  mode: "svg",
};

const qrCode = new QRCode(params);

Initialization Parameters

The QRCode class takes an object with the following properties as initialization parameters:

• id (optional): string
  • The ID of the HTML element where the QR code will be rendered.
• element (optional): HTMLElement
  • The HTML element where the QR code will be rendered. If both id and element are provided, element will be used.
• width (optional): number
  • The width of the QR code.
• height (optional): number
  • The height of the QR code.
• typeNumber (optional): number
  • The QR code version (1-40). Higher values increase the size and data capacity of the QR code.
• colorDark: string
  • The color of the dark modules (QR code pixels).
• colorLight: string
  • The color of the light modules (background).
• correctLevel (optional): QRErrorCorrectLevel
  • The error correction level. Possible values are:
    • QRErrorCorrectLevel.L (Low - ~7% error correction)
    • QRErrorCorrectLevel.M (Medium - ~15% error correction)
    • QRErrorCorrectLevel.Q (Quartile - ~25% error correction)
    • QRErrorCorrectLevel.H (High - ~30% error correction)
• text (optional): string
  • The text or URL to be encoded in the QR code.
• mode (optional): "svg" | "dom"
  • The rendering mode. Either 'svg' for SVG rendering or 'dom' for HTML DOM rendering.

License

MIT License

Acknowledgments

This library is based on QRCodeTS by lilRedaka and the original QRCodeJS by davidshimjs.

---

Made with ✨ & ❤️ by ForWarD Software and contributors