Youverse QR Code Scanner Component

A lightweight web component that scans QR codes directly in the browser.

Getting Started

npm install yv-qrcode-scanner-web

Integration via NPM

Install yv-qrcode-scanner-web:

npm i yv-qrcode-scanner-web

Import the component module into your .js file:

// If you use module bundler
import 'yv-qrcode-scanner-web';

// If you don't use module bundler
import './node_modules/yv-qrcode-scanner-web/js/dist/youverse-qr-scanner.min.js';

Add the component name to the .html file.

<youverse-qr-scanner 
    locale="en"
></youverse-qr-scanner>

Integration via CDN

Connect the script in your .html file. Here is the CDN link: https://www.jsdelivr.com/package/npm/:package@:version/:file

For example:

<script src="https://cdn.jsdelivr.net/npm/yv-qrcode-scanner-web@latest/js/dist/youverse-qr-scanner.min.js"></script>

Add the component name to the .html file.

<youverse-qr-scanner 
    locale="en"
></youverse-qr-scanner>

Attributes

Attribute | Info | Data type | Default Value | Values ------------------|------------------------------------------------------------------|---------------|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- locale | The language of the component interface | string | en | en, pt, es title-text | Text for the component title. Translation based on the language selected | string | QR Code Reader | string
info-text | Text for the component info. Translation based on the language selected | string | Position the QR code within the frame to start reading | string

Events

You can subscribe to the component events.

For example:

document.addEventListener('YV_QR_DECODE_EVENT', (event) => {
  console.log(event.detail.payload);
});

Type of events:

| Event | Description | Event Handling | |------------------------|--------------------------------------------|--------------------------------------------------| | YV_QR_DECODE_EVENT | Event triggered when a QR code is decoded | Handled by a designated event listener in the application (listener) |

For more information please contact us.