qrx-scanner

QR code scanning component for React based on jsQR and react-webcam libraries.

Install

npm install qrx-scanner

Demo

https://qrx-scanner.ddns.net/

git clone https://github.com/thylacinus-official/qrx-scanner .
npm install
npm run demo # https://localhost:8080/

Usage

import React from 'react';
import QRScanner from 'qrx-scanner';

const QRScannerComponent = () => <QRScanner />;

Props

| Name | Type | Default | | ---------------- | -------------------------------- | ---------------------------------------------- | | autoStart | boolean | true | | callback | function(img: ImageData) => void | | | cursorClassName | string | | | cursorResolution | number | 400 | | fullScreen | boolean | false | | minCursorSize | number | 0.4 | | onFailed | function(error: Error) => void | | | onSuccess | function(res: QRCode) => void | | | timeout | number | 30000 | | videoSize | 'contain' | 'cover' | contain | | webcamProps | Partial<WebcamProps> | defaultWebcamProps |

defaultWebcamProps

const defaultWebcamProps = {
    videoConstraints: {
        facingMode: { exact: 'environment' },
        height: 1080,
    },
};

Methods

| Name | Args | Res | | ------------ | ------------------------------ | ----------------------- | | handleResize | | void | | scan | ScanParams | Promise<QRCode | null> |

ScanParams

type ScanParams = {
    callback?: (img: ImageData) => void;
    silent?: boolean;
    timeout?: number;
};

Properties

| Name | Type | | ------ | ------- | | loaded | boolean |