QRcode JAVASCRIPT UI Component API

QRcode Javascript API

Class

QRcode

QRcode

QR Codes encode text values in a two-dimensional pattern.

Selector

smart-qrcode

Properties

BbackgroundColorSpecifies the background color applied to the QR Code element, determining the area behind the QR pattern. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color names). This setting allows you to customize the appearance of the QR Code to match your application's design.
DdisplayLabelDetermines whether the label associated with the QR Code is displayed to users. When enabled, the label will appear alongside the QR Code; when disabled, the label will be hidden.
EembedImageEmbeds an image directly within the file, allowing the image to be displayed without referencing an external URL. This ensures the image is self-contained and always available as part of the JSON data.
EerrorLevelSpecifies the degree of error correction to be applied, determining how much of the data can be recovered if the file or code is partially damaged or obscured. Higher error correction levels provide more robust data recovery but may increase the file size.
IimageBackgroundColorSpecifies the color that will fill the transparent areas of the embedded image. If this property is set to an empty string, the transparent regions will remain fully transparent, allowing the background beneath the image to show through.
IimageHeightSpecifies the vertical dimension, in pixels or percentage, to display the embedded image. This determines how tall the image will appear within its container, regardless of its original size.
IimageWidthSpecifies the width, in pixels or other valid CSS units, for displaying the embedded image. This determines how wide the image will appear within its container on the webpage.
LlabelColorSpecifies the color used for the text label displayed below or alongside the QR Code. Accepts color values in standard formats such as hex codes (e.g., "#000000"), RGB, or named CSS colors.
LlabelFontSpecifies the font family to be used for displaying the QR code label text. This determines the typeface style (e.g., Arial, Verdana, 'Times New Roman') applied to the label beneath or beside the QR code.
LlabelFontSizeSpecifies the font size used for the text label displayed below or alongside the QR code. Adjusting this value changes how large or small the label text appears relative to the QR code. Supports standard CSS size units (e.g., px, em, rem).
LlabelMarginBottomSpecifies the amount of space (in pixels, ems, or other CSS units) added to the bottom of the QR Code label, effectively controlling the distance between the label and the elements below it.
LlabelMarginTopSpecifies the amount of space (in pixels or other CSS units) added to the top of the QR Code label, effectively controlling the distance between the label and any elements positioned above it.
LlabelPositionSpecifies the placement of the label relative to the QR Code, such as positioning it above, below, to the left, or to the right of the QR Code. This property determines where the label will appear in relation to the generated QR Code image.
LlineColorSpecifies the color used for the QR Code’s foreground lines (modules or squares), determining how the QR Code pattern appears. Accepts color formats such as HEX, RGB, or named colors. The background color is not affected by this setting.
SsquareWidthSpecifies the width of the generated QR Code, in pixels. This value determines the size of the QR Code square displayed on the page.
RrenderAsSpecifies the rendering method used to display the QR Code, such as SVG, Canvas, or Image. This determines how the QR Code is visually generated and presented in the application.
VvalueGets or sets the content encoded in the QR Code, such as a URL, text, or other data. Use this property to specify or retrieve the information that will be embedded within the generated QR Code.
WwidthSpecifies or retrieves the width of the QR Code in pixels. If set to 0, the width will be determined automatically based on the QR Code’s content and configuration, ensuring optimal sizing. Setting a specific positive value allows you to control the exact width of the generated QR Code.
HheightSpecifies or retrieves the height of the QR code, in pixels. When a value of 0 is assigned, the component automatically calculates and sets the optimal height based on the content and other configuration options. Otherwise, the QR code is rendered with the specified height.

Events

IinvalidThis event is triggered when the QR Code fails validation—specifically, when its decoded value does not meet the expected format, content requirements, or integrity checks. Developers can listen for this event to handle errors, display user feedback, or prompt for a new QR Code input.

Methods

EexportExports the generated QR Code image in a selected format, such as PNG or SVG, allowing users to download or save the QR Code for use in other applications.
GgetDataURLRetrieves the QR Code as a base64-encoded string representation of the image, suitable for embedding directly in HTML or storing for later use.
GgetDataURLAsyncRetrieves the QR code as a Base64-encoded string, allowing you to easily embed or transfer the QR code image in web pages, APIs, or data storage without handling image files directly.
IisValidRetrieves and returns the current validity status of the QR Code, indicating whether the QR Code is active, expired, or invalid.

Properties

backgroundColorstring

Specifies the background color applied to the QR Code element, determining the area behind the QR pattern. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color names). This setting allows you to customize the appearance of the QR Code to match your application's design.

Default value

"white"

Example

Set the backgroundColor property. 

 <smart-qrcode background-color='white'></smart-qrcode>

Set the backgroundColor property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.backgroundColor = 'yellow';

Get the backgroundColor property. 

 const qrcode = document.querySelector('smart-qrcode');
 let backgroundColor = qrcode.backgroundColor;

displayLabelboolean

Determines whether the label associated with the QR Code is displayed to users. When enabled, the label will appear alongside the QR Code; when disabled, the label will be hidden.

Default value

false

Example

Set the displayLabel property. 

 <smart-qrcode display-label></smart-qrcode>

Set the displayLabel property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.displayLabel = true;

Get the displayLabel property. 

 const qrcode = document.querySelector('smart-qrcode');
 let displayLabel = qrcode.displayLabel;

embedImagestring

Embeds an image directly within the file, allowing the image to be displayed without referencing an external URL. This ensures the image is self-contained and always available as part of the JSON data.

Default value

""

Example

Set the embedImage property. 

 <smart-qrcode embed-image=''></smart-qrcode>

Set the embedImage property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.embedImage = '';

Get the embedImage property. 

 const qrcode = document.querySelector('smart-qrcode');
 let embedImage = qrcode.embedImage;

errorLevelstring

Specifies the degree of error correction to be applied, determining how much of the data can be recovered if the file or code is partially damaged or obscured. Higher error correction levels provide more robust data recovery but may increase the file size.

Default value

"H"

Example

Set the errorLevel property. 

 <smart-qrcode error-level='H'></smart-qrcode>

Set the errorLevel property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.errorLevel = 'L';

Get the errorLevel property. 

 const qrcode = document.querySelector('smart-qrcode');
 let errorLevel = qrcode.errorLevel;

imageBackgroundColorstring

Specifies the color that will fill the transparent areas of the embedded image. If this property is set to an empty string, the transparent regions will remain fully transparent, allowing the background beneath the image to show through.

Default value

""

Example

Set the imageBackgroundColor property. 

 <smart-qrcode image-background-color='blue'></smart-qrcode>

Set the imageBackgroundColor property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.imageBackgroundColor = 'white';

Get the imageBackgroundColor property. 

 const qrcode = document.querySelector('smart-qrcode');
 let imageBackgroundColor = qrcode.imageBackgroundColor;

imageHeightnumber

Specifies the vertical dimension, in pixels or percentage, to display the embedded image. This determines how tall the image will appear within its container, regardless of its original size.

Default value

15

Example

Set the imageHeight property. 

 <smart-qrcode image-height=''></smart-qrcode>

Set the imageHeight property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.imageHeight = ;

Get the imageHeight property. 

 const qrcode = document.querySelector('smart-qrcode');
 let imageHeight = qrcode.imageHeight;

imageWidthnumber

Specifies the width, in pixels or other valid CSS units, for displaying the embedded image. This determines how wide the image will appear within its container on the webpage.

Default value

15

Example

Set the imageWidth property. 

 <smart-qrcode image-width=''></smart-qrcode>

Set the imageWidth property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.imageWidth = ;

Get the imageWidth property. 

 const qrcode = document.querySelector('smart-qrcode');
 let imageWidth = qrcode.imageWidth;

labelColorstring

Specifies the color used for the text label displayed below or alongside the QR Code. Accepts color values in standard formats such as hex codes (e.g., "#000000"), RGB, or named CSS colors.

Default value

"black"

Example

Set the labelColor property. 

 <smart-qrcode label-color='white'></smart-qrcode>

Set the labelColor property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.labelColor = 'red';

Get the labelColor property. 

 const qrcode = document.querySelector('smart-qrcode');
 let labelColor = qrcode.labelColor;

labelFontstring

Specifies the font family to be used for displaying the QR code label text. This determines the typeface style (e.g., Arial, Verdana, 'Times New Roman') applied to the label beneath or beside the QR code.

Default value

"monospace"

Example

Set the labelFont property. 

 <smart-qrcode label-font='monospace'></smart-qrcode>

Set the labelFont property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.labelFont = 'sans-serif';

Get the labelFont property. 

 const qrcode = document.querySelector('smart-qrcode');
 let labelFont = qrcode.labelFont;

labelFontSizenumber

Specifies the font size used for the text label displayed below or alongside the QR code. Adjusting this value changes how large or small the label text appears relative to the QR code. Supports standard CSS size units (e.g., px, em, rem).

Default value

14

Example

Set the labelFontSize property. 

 <smart-qrcode label-font-size='14'></smart-qrcode>

Set the labelFontSize property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.labelFontSize = 10;

Get the labelFontSize property. 

 const qrcode = document.querySelector('smart-qrcode');
 let labelFontSize = qrcode.labelFontSize;

labelMarginBottomnumber

Specifies the amount of space (in pixels, ems, or other CSS units) added to the bottom of the QR Code label, effectively controlling the distance between the label and the elements below it.

Default value

5

Example

Set the labelMarginBottom property. 

 <smart-qrcode label-margin-bottom='5'></smart-qrcode>

Set the labelMarginBottom property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.labelMarginBottom = 0;

Get the labelMarginBottom property. 

 const qrcode = document.querySelector('smart-qrcode');
 let labelMarginBottom = qrcode.labelMarginBottom;

labelMarginTopnumber

Specifies the amount of space (in pixels or other CSS units) added to the top of the QR Code label, effectively controlling the distance between the label and any elements positioned above it.

Default value

5

Example

Set the labelMarginTop property. 

 <smart-qrcode label-margin-top='5'></smart-qrcode>

Set the labelMarginTop property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.labelMarginTop = 5;

Get the labelMarginTop property. 

 const qrcode = document.querySelector('smart-qrcode');
 let labelMarginTop = qrcode.labelMarginTop;

labelPosition"top" | "bottom"

Specifies the placement of the label relative to the QR Code, such as positioning it above, below, to the left, or to the right of the QR Code. This property determines where the label will appear in relation to the generated QR Code image.

Default value

"bottom"

Example

Set the labelPosition property. 

 <smart-qrcode label-position='bottom'></smart-qrcode>

Set the labelPosition property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.labelPosition = 'top';

Get the labelPosition property. 

 const qrcode = document.querySelector('smart-qrcode');
 let labelPosition = qrcode.labelPosition;

lineColorstring

Specifies the color used for the QR Code’s foreground lines (modules or squares), determining how the QR Code pattern appears. Accepts color formats such as HEX, RGB, or named colors. The background color is not affected by this setting.

Default value

"black"

Example

Set the lineColor property. 

 <smart-qrcode line-color='balck'></smart-qrcode>

Set the lineColor property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.lineColor = 'green';

Get the lineColor property. 

 const qrcode = document.querySelector('smart-qrcode');
 let lineColor = qrcode.lineColor;

squareWidthnumber

Specifies the width of the generated QR Code, in pixels. This value determines the size of the QR Code square displayed on the page.

Default value

7

Example

Set the squareWidth property. 

 <smart-qrcode square-width='4'></smart-qrcode>

Set the squareWidth property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.squareWidth = 6;

Get the squareWidth property. 

 const qrcode = document.querySelector('smart-qrcode');
 let squareWidth = qrcode.squareWidth;

renderAs"svg" | "canvas"

Specifies the rendering method used to display the QR Code, such as SVG, Canvas, or Image. This determines how the QR Code is visually generated and presented in the application.

Default value

"svg"

Example

Set the renderAs property. 

 <smart-qrcode render-as='svg'></smart-qrcode>

Set the renderAs property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.renderAs = 'canvas';

Get the renderAs property. 

 const qrcode = document.querySelector('smart-qrcode');
 let renderAs = qrcode.renderAs;

valuestring

Gets or sets the content encoded in the QR Code, such as a URL, text, or other data. Use this property to specify or retrieve the information that will be embedded within the generated QR Code.

Default value

""

Example

Set the value property. 

 <smart-qrcode value='A2402B'></smart-qrcode>

Set the value property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.value = 'example';

Get the value property. 

 const qrcode = document.querySelector('smart-qrcode');
 let value = qrcode.value;

widthnumber

Specifies or retrieves the width of the QR Code in pixels. If set to 0, the width will be determined automatically based on the QR Code’s content and configuration, ensuring optimal sizing. Setting a specific positive value allows you to control the exact width of the generated QR Code.

Default value

0

Example

Set the width property. 

 <smart-qrcode width='10'></smart-qrcode>

Set the width property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.width = null;

Get the width property. 

 const qrcode = document.querySelector('smart-qrcode');
 let width = qrcode.width;

heightnumber

Specifies or retrieves the height of the QR code, in pixels. When a value of 0 is assigned, the component automatically calculates and sets the optimal height based on the content and other configuration options. Otherwise, the QR code is rendered with the specified height.

Default value

0

Example

Set the height property. 

 <smart-qrcode height='10'></smart-qrcode>

Set the height property by using the HTML Element's instance. 

 const qrcode = document.querySelector('smart-qrcode');
 qrcode.height = null;

Get the height property. 

 const qrcode = document.querySelector('smart-qrcode');
 let height = qrcode.height;

Events

invalidCustomEvent

This event is triggered when the QR Code fails validation—specifically, when its decoded value does not meet the expected format, content requirements, or integrity checks. Developers can listen for this event to handle errors, display user feedback, or prompt for a new QR Code input.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onInvalid

Arguments

evCustomEvent
ev.detailObject
ev.detail.invalidCharacters - An array indicating the invalid characters.
ev.detail.lengthValidity - A boolean indicating the length validity.
ev.detail.patternValidity - A boolean indicating the pattern validity.
ev.detail.value - the invalid value of the QR Code.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of invalid event. 

const qrcode = document.querySelector('smart-qrcode');
qrcode.addEventListener('invalid', function (event) {
    const detail = event.detail,
        invalidCharacters = detail.invalidCharacters,
        lengthValidity = detail.lengthValidity,
        patternValidity = detail.patternValidity,
        value = detail.value;

	// event handling code goes here.
})

Methods

export( format: string, fileName?: string): void

Exports the generated QR Code image in a selected format, such as PNG or SVG, allowing users to download or save the QR Code for use in other applications.

Arguments

formatstring

The format of the exported file - svg, png, jpg

fileName?string

The name of the exported file


Invoke the export method.

const qrcode = document.querySelector('smart-qrcode');
qrcode.export();

getDataURL( format: string): string

Retrieves the QR Code as a base64-encoded string representation of the image, suitable for embedding directly in HTML or storing for later use.

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsstring

Invoke the getDataURL method.

const qrcode = document.querySelector('smart-qrcode');
const result = qrcode.getDataURL("svg","png");

getDataURLAsync( format: string): object

Retrieves the QR code as a Base64-encoded string, allowing you to easily embed or transfer the QR code image in web pages, APIs, or data storage without handling image files directly.

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsobject

Invoke the getDataURLAsync method.

const qrcode = document.querySelector('smart-qrcode');
const result = qrcode.getDataURLAsync("svg","png");

isValid(): boolean

Retrieves and returns the current validity status of the QR Code, indicating whether the QR Code is active, expired, or invalid.

Returnsboolean

Invoke the isValid method.

const qrcode = document.querySelector('smart-qrcode');
const result = qrcode.isValid();