react js functional

[schlauerwolf]

Hi
Can I use html-qrcode in react js functional? In particular how do I convert to render - with parameters.
Thank you.

[schlauerwolf]

Hi
This is my first attempt:

import qr_code from "html5-qrcode";
import React, {useEffect} from "react";

const qrcodeRegionId = "html5qr-code-full-region";

export default function QrCode (props) {

useEffect(
    () => {
    // Creates the configuration object for Html5QrcodeScanner.
        function createConfig(props) {
            var config = {};
            if (props.fps) {
                config.fps = props.fps;
            }
            if (props.qrbox) {
                config.qrbox = props.qrbox;
            }
            if (props.aspectRatio) {
                config.aspectRatio = props.aspectRatio;
            }
            if (props.disableFlip !== undefined) {
                config.disableFlip = props.disableFlip;
            }
            return config;
        }

        props.config = createConfig(props);

        // Success callback is required.
        if (!(props.qrCodeSuccessCallback )) {
            throw "qrCodeSuccessCallback is required callback.";
        }

// this.html5QrcodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose);
// this.html5QrcodeScanner.render(this.props.qrCodeSuccessCallback,this.props.qrCodeErrorCallback);

        return () => {
            this.html5QrcodeScanner.clear().catch(error => {
                console.error("Failed to clear html5QrcodeScanner. ", error);
            });
        };
    
    
    }, []
);

return (
    <div>
        <h1>
            Please Scan your table's qr code
        </h1>
        <p>
            We need to locate you on the premises.
        </p>
        <div className="box">
            <qr_code
                elementId={qrcodeRegionId}           
                config={props.config}
                verbose={props.verbose}
                qrCodeSuccessCallback={props.successCb}
                QrcodeErrorCallback={props.errorCb}
            />
        </div>
    </div>
);

};

[schlauerwolf]

Sorry :) - formatting

1. How do I pass the callback to the element. This are passed as argument to the render function in the example.
2. How do I clear the scanner - this will not compile 'this.html5QrcodeScanner.clear'

Thank you :)

Kind regards
w

`
import qr_code from "html5-qrcode";
import React, {useEffect} from "react";

const qrcodeRegionId = "html5qr-code-full-region";

export default function QrCode (props) {

useEffect(
    () => {
    // Creates the configuration object for Html5QrcodeScanner.
        function createConfig(props) {
            var config = {};
            if (props.fps) {
                config.fps = props.fps;
            }
            if (props.qrbox) {
                config.qrbox = props.qrbox;
            }
            if (props.aspectRatio) {
                config.aspectRatio = props.aspectRatio;
            }
            if (props.disableFlip !== undefined) {
                config.disableFlip = props.disableFlip;
            }
            return config;
        }

        props.config = createConfig(props);

        // Success callback is required.
        if (!(props.qrCodeSuccessCallback )) {
            throw "qrCodeSuccessCallback is required callback.";
        }

        return () => {
            this.html5QrcodeScanner.clear().catch(error => {
                console.error("Failed to clear html5QrcodeScanner. ", error);
            });
        };
    
    
    }, []
);

return (
    <div>
        <h1>
            Please Scan your table's qr code
        </h1>
        <p>
            We need to locate you on the premises.
        </p>
        <div className="box">
            <qr_code
                elementId={qrcodeRegionId}           
                config={props.config}
                verbose={props.verbose}
                qrCodeSuccessCallback={props.successCb}
                QrcodeErrorCallback={props.errorCb}
            />
        </div>
    </div>
);

};

`

[schlauerwolf]

Ok - solved - using Html5Qrcode now :)