svelte-easy-qr v0.2.1

Svelte Qr Scanner

Everything you need to build a qr scanner, powered by html5-qrcode.

Getting Started

<script>
    import {Scanner} from "svelte-easy-qr";

    //default
const onScanSuccess = function (decodedText, decodedResult) {
		// handle the scanned code as you like, for example:
		console.log(`Code matched = ${decodedText}`, decodedResult);
	};
 //default
const qrboxFunction = function (viewfinderWidth, viewfinderHeight) {
		let minEdgePercentage = 0.7; // 70%
		let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
		let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
		return {
			width: qrboxSize,
			height: qrboxSize
		};
	};
 //default
const cameraView = 'environment'; // user | environment
 //default
const fps = 10;


<script>


<Scanner classes="someclass" // some styling
{onScanSuccess}
{qrboxFunction}
{cameraView}
{fps}

/>

Customization

You can customize scanner according to the documentation html5-qrcode

<script>
    import {Scanner} from "svelte-easy-qr";
    let scanner;

    //default
const onScanSuccess = function (decodedText, decodedResult) {
		// handle the scanned code as you like, for example:
		console.log(`Code matched = ${decodedText}`, decodedResult);
        scanner.stop()
	};
 //default
const qrboxFunction = function (viewfinderWidth, viewfinderHeight) {
		let minEdgePercentage = 0.7; // 70%
		let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
		let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
		return {
			width: qrboxSize,
			height: qrboxSize
		};
	};
 //default
const cameraView = 'environment'; // user | environment
 //default
const fps = 10;




<script>


<Scanner classes="someclass" // some styling
{onScanSuccess}
{qrboxFunction}
{cameraView}
{fps}
bind:scanner={scanner}

/>

You can contribute and report issues at Github.