Angular

Vue

React

Getting Started with QRcode Web Component

Smart UI Web Components work with current evergreen browsers and Node 18+ for local tooling; pin package versions to match your project policy.

Smart UI is distributed as the smart-webcomponents NPM package. You can also use the full download from the Download page.

Quick start

Install the package:
```
npm install smart-webcomponents
```

Load the QRcode module (ES module script):

<script type="module" src="node_modules/smart-webcomponents/source/modules/smart.qrcode.js"></script>

Add the default stylesheet (prefer angular.json / bundler entry in app codebases; for plain HTML use a link):

<link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />

Add markup in one of two ways - semantic custom element (the component tag is in your HTML) or a host div (you mount programmatically with appendTo):

Semantic element (id matches the selector in Smart()):
```
<smart-qrcode id="qrcode"></smart-qrcode>
```
Host container (id matches appendTo on Smart.QRcode):
```
<div id="qrcodeContainer"></div>
```

Initialize after the module loads: define a const qrcodeOptions object, then either bind with Smart('#qrcode', ...) on the semantic tag or use new Smart.QRcode({ ...qrcodeOptions, appendTo: '#qrcodeContainer' }) on the host div:

<script type="module">
	import 'node_modules/smart-webcomponents/source/modules/smart.qrcode.js';

	const qrcodeOptions = {};

	// Option A - semantic <smart-qrcode> with id="qrcode"
	Smart('#qrcode', class {
		get properties() {
			return qrcodeOptions;
		}
	});

	// Option B - host div id="qrcodeContainer"
	// const qrcodeInstance = new Smart.QRcode({
	// 	...qrcodeOptions,
	// 	appendTo: '#qrcodeContainer'
	// });

	// Option C - constructor(selector, options), then append the returned element yourself
	// const myQRcode = new Smart.QRcode('#qrcode', qrcodeOptions);
	// document.body.appendChild(myQRcode);
</script>

Uncomment Option B when you use the host div; use Option A when you use the semantic element. The Runtime cookbook also documents new Smart.QRcode('#qrcode', qrcodeOptions) with appendChild, and document.createElement('smart-qrcode') with .props or Object.assign (all are valid patterns; do not combine overlapping patterns for the same instance unless you intend multiple components).

Serve the folder over HTTP (or use your bundler dev server) and open the page.

Runtime cookbook

Alternative creation patterns and imperative APIs. These are all valid ways to create Smart UI components: semantic markup + Smart(); new Smart.QRcode({ ...options, appendTo: '#...' }); new Smart.QRcode('#qrcode', qrcodeOptions) plus appendChild on the returned element; and document.createElement('smart-qrcode') then assigning options via .props or Object.assign on the element.

Constructor with a selector string and options, then append the returned element (for example const myQRcode = new Smart.QRcode('#qrcode', qrcodeOptions)):

	const qrcodeOptions = {};
	const myQRcode = new Smart.QRcode('#qrcode', qrcodeOptions);
	document.body.appendChild(myQRcode);

Create with document.createElement('smart-qrcode'), assign properties (same as any custom element), then append:

	const qrcodeOptions = {};
	const qrcode = document.createElement('smart-qrcode');
	Object.assign(qrcode, qrcodeOptions);
	document.body.appendChild(qrcode);

Host on a div with appendTo (import the module, then instantiate when the document is ready; the container id must match appendTo):

	import "../../source/modules/smart.qrcode.js";

	document.readyState === 'complete' ? init() : window.addEventListener('load', init);

	function init() {
		const qrcodeOptions = {};
		const qrcode = new Smart.QRcode({
			...qrcodeOptions,
			appendTo: '#qrcodeContainer'
		});
	}

Demo

The qrcode element supports all officialy adopted encoding modes as per ISO 2015:

Numeric
Alphanumeric
Byte / Binary
Kanji

<!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents-lite.min.js">
</script>
        <script type="text/javascript" src="../../source/Smart.element.js"></script>
        <script type="text/javascript" src="../../source/Smart.barcode.js"></script>
        <script type="text/javascript" src="../../source/Smart.qrcode.js"></script>
    </head>
    <body>
        <smart-qrcode value="こんにちは世界" display-label="true"></smart-qrcode>
    </body>
    </html>

Demo

The QR Code supports four different Error Correction Levels - L, M, Q, H.
As per the ISO standard, the Error Correction Level L is the lowest and the H the highest.
The higher the Error Correction Level, the higher is the amount of data that can be retrieved if part of the QR Code is damaged or hidden.

                    <smart-qrcode value="HTMLELEMENTS.COM" error-correction-level="H"></smart-qrcode>
                    <smart-qrcode value="HTMLELEMENTS.COM" error-correction-level="L"></smart-qrcode>

Demo

When the Error Correction Level is sufficiently big, it is possible to embed an Image inside the QR Code.
The maximum size of the image depends on the Error Correction Level and the QR Code value.

                    <smart-qrcode value="HTMLELEMENTS.COM" error-level="H" square-width="13" 
                    embed-image="https://www.htmlelements.com/favicon-32x32.png" image-width="50" image-height="50">
                    </smart-qrcode>

Demo

Appearance

The rendering mode is set using the renderAs property - svg(default) and canvas are supported.
The recommended rendering mode is svg as the image quality remains the same as the QR Code is zoomed in.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents-lite.min.js">
</script>
        <script type="text/javascript" src="../../source/Smart.element.js"></script>
        <script type="text/javascript" src="../../source/Smart.barcode.js"></script>
        <script type="text/javascript" src="../../source/Smart.qrcode.js"></script>
    </head>
    <body>
        <smart-qrcode render-as="svg" value="12345"></smart-qrcode>
        <smart-qrcode render-as="canvas" value="12345"></smart-qrcode>
    </body>
    </html>

Demo

The QR Code's color, background color and square dimensions can be customized by their respective properties:

<smart-qrcode value="HTMLELEMENTS.COM" value="HTMLELEMENTS.COM" line-color="green" background-color="#D3D3D3" square-width="10"></smart-qrcode>

Demo

The label of the QR Code can be set to visible or hidden with displayLabel. Its color, font, size, margins and position can be customized by their respective properties. When the qrcode is rendered as svg, the label can also be customized with CSS.

<smart-qrcode value="HTMLELEMENTS.COM" line-color="orange" display-label="true" label-position="top" label-font-size="20" label-color="orange"></smart-qrcode>

Behavior

Every valid qrcode can be exported to a downloadable file. The export method supports the following formats:

<script>
    function exportQRCode(){
        let qrcode1 = document.getElementById('export-qrcode');
        qrcode1.export('png', 'my-qrcode');
    }
</script>
<smart-qrcode id="export-qrcode" value="A2402B" label-position="top" label-font-size="30" label-color="orange" label-font="arial" line-color="orange"></smart-qrcode>
<button onclick="exportQRCode()">Download</button>

Demo

Smart.QRcode contains a built-in validator, which depends on the qrcode type.
In the case of a invalid value, the isValid method will return false and the invalid event will be triggered.

The invalid event.detail contains multiple values that can indicate the validity of the qrcode:

invalidCharacters - An array indicating the invalid characters.
patternValidity - A boolean indicating the validity of the qrcode pattern.
lengthValidity - A boolean indicating the validity of the qrcode length.

The demo below will output the illegal charcters of the qrcode:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents-lite.min.js">
</script>
 <script type="text/javascript" src="../../source/Smart.element.js"></script>
 <script type="text/javascript" src="../../source/Smart.barcode.js"></script>
 <script type="text/javascript" src="../../source/Smart.qrcode.js"></script>
 <script>
 window.onload = function(){
    var qrcode2 = document.getElementById('invalid-qrcode');
    const OnInvalid = (event) => {
            let invalidChars = event.detail.invalidCharacters;
            document.getElementById("invalid-box").textContent+= invalidChars.join(' and ')
        };

    qrcode2.addEventListener("invalid", OnInvalid);
}
 function changeValue(){
    qrcode2 = document.getElementById('invalid-qrcode');
    qrcode2.value = "AB1230ШЪ"
}
 </script>
</head>
<body>
 <smart-qrcode id="invalid-qrcode" value="AB1230"></smart-qrcode>
 <button onclick="changeValue()">Change Value</button>   
 <h3 id="invalid-box">Invalid symbols:</h3>
</body>
</html>

Demo

Append to the DOM:

const container = document.getElementById('qrcode-container');
container.appendChild(qrcode);

Remove from the DOM:

qrcode.remove();

Set a property:

qrcode.disabled = true;
qrcode.theme = 'dark';

Get a property value:

const isDisabled = qrcode.disabled;
const currentTheme = qrcode.theme;

Invoke a method:

qrcode.refresh();
qrcode.focus();

Add event listener:

qrcode.addEventListener('invalid', (event) => {
    console.log('invalid triggered:', event.detail.invalidCharacters);
});

Remove event listener:

const handleQRcodeEvent = (event) => {
    console.log('invalid triggered:', event.detail.invalidCharacters);
};

qrcode.addEventListener('invalid', handleQRcodeEvent);
qrcode.removeEventListener('invalid', handleQRcodeEvent);

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.