This is a wrapper around html5-qrcode for JBL System.

How to use

Install using npm with:

npm i @jbl-system/scanner

import Scanner from "@jbl-system/scanner"

... 

<div>
    <Scanner
        scanType='BAR'
        divID='barcode'
        divStyle='barcode-container'
        handleRead = {processBarcodeResult} 
        handleError = {processError} 
        stopped = {!showScannerModal}
        showScanRegion = {true}
    />
</div>
...

  /**
   * Start scanning QR codes or barcodes for a given camera.
   * 
   * @param divID Id of the HTML element. Default, scanner
   * @param divStyle Style of the HTML element. Default, barcode-scanner
   * @param scanType Type of scanning code, QR or BAR
   * @param showScanRegion Show or not scanning region
   * @param handleRead Callback called when an instance of a QR
   * code or any other supported bar code is found. {@type QrcodeSuccessCallback}
   * @param handleError Callback called in cases where no instance of
   * QR code or any other supported bar code is found. {@type QrcodeErrorCallback}
   * @param paused Pauses the ongoing scan. If {@code true} the video will be paused.
   * @param stopped Starts/Stops streaming QR Code video and scanning. If {@code true} the video will be stopped.
   */

interface ScannerProps {
    divID?: string | "scanner"
    divStyle?: string | "barcode-container"
    scanType: "QR" | "BAR"
    handleRead: Function
    handleError: Function
    paused?: boolean
    stopped?: boolean
    showScanRegion? : boolean | false
}

Release Notes

Wrapper does not support file scanning.

Ver 1.0 does not support camera selection and uses the back camera (for multi cameras devices) or the default one.

For the performance reasons wrapper support only 2 code formats - QR_CODE and CODE_39 based on scanType prop

Ver 1.0.8 supports React 18