[Feature Request] add support for react also

[isanjaymaurya]

No description provided.

[AndyTenholder]

I got the Html5QrCodeScanner working in a React project. I created a JS file and manually added the non-minified Html5QrCode, Html5QrCodeScanner , and getLazarSoftScanner logic. Then added the export flag to the Html5QrCode and Html5QrCodeScanner classes. Here's the basic component.

import React from 'react';
import { AppState } from 'src/logic/store';
import { connect } from 'react-redux';
import * as Styles from 'src/styles/App.scss';
import { Html5QrcodeScanner } from 'src/logic/qr-reader/html5-qr-reader';

interface OwnProps {
    qrbox?: number;
    fps?: number;
}

interface StateProps {}

interface DispatchProps {}

type Props = StateProps & DispatchProps & OwnProps;

export class QrCodeReader extends React.Component<Props> {
    public constructor(props: Props) {
        super(props);
    }

    public componentDidMount() {
        var $this = this;
        var config = { fps: this.props.fps ? this.props.fps : 10 };

        function onScanSuccess(qrCodeMessage: any) {
            console.log(qrCodeMessage);
        }

        function onScanError(qrCodeMessage: any) {
            console.log(qrCodeMessage);
        }

        var html5QrcodeScanner = new Html5QrcodeScanner('qr-code-full-region', config, true);
        html5QrcodeScanner.render(onScanSuccess, onScanError);
    }

    public render() {
        return <div id={'qr-code-full-region'} className={`${Styles.widthAuto}`} />;
    }
}

const mapStateToProps = () => {
    return {};
};

const mapDispatchToProps: DispatchProps = {};

export default connect<StateProps, DispatchProps, OwnProps, AppState>(
    mapStateToProps,
    mapDispatchToProps,
)(QrCodeReader);

[mebjas]

@AndyTenholder This is very cool - would you be interested in sending a PR with example here

The format would be

examples/react
              | Readme.md
              | Html5QrCodeScannerPlugin.js

Please refer to other examples at ./examples.

Also, add a section to main readme.md#framework-support

[mebjas]

@AndyTenholder I have added a crude example of how to use this library with React (#113). I am sure this is not the most recommended way of doing so, If you are interested please feel free to improve on the current example with recommended practices.

The example sits in examples/react

In long term it looks like users would benefit from a proper (published) react plugin of this library - I'd try to implement and publish that in a way it's maintainable along with this project.

[nrakochy]

Hi there,

Thanks for the project. I did not actually get this working before I realized that I need the scanFile api, but thought I would share this here, in case someone is looking for React hooks instead of a class component.

import React, { useEffect, ReactNode } from 'react';

interface ScannerConfigProps {
  fps?: number;
  qrBox?: number;
  aspectRatio?: number;
  disableFlip?: boolean;
}

type QRPromiseHandler = (arg: any) => void;

interface ScannerProps extends ScannerConfigProps {
  verbose: boolean;
  qrCodeSuccessCallback: QRPromiseHandler;
  qrCodeErrorCallback: QRPromiseHandler;
  id: string;
}

declare class Html5QrcodeScanner {
  constructor(id: string, config: ScannerConfigProps, verbose: boolean);

  public render(
    config: ScannerConfigProps,
    qrCodeSuccessCallback: QRPromiseHandler,
    qrCodeErrorCallback: QRPromiseHandler,
  ): Promise<void>;
}

function createConfig(props: ScannerConfigProps): Partial<ScannerConfigProps> {
  const defaults = { disableFlip: false };
  return { ...defaults, ...props };
}

export const QRScanner: ReactNode = (props: ScannerProps) => {
  const {
    verbose = false,
    id = 'qr-code-full-region',
    qrCodeSuccessCallback,
    qrCodeErrorCallback,
    ...userConfig
  } = props;

  useEffect(() => {
    const config: ScannerConfigProps = createConfig(userConfig);
    const scanner = new Html5QrcodeScanner(id, config, verbose);
    scanner.render(config, qrCodeSuccessCallback, qrCodeErrorCallback);
    return () => {
      scanner.clear().catch((error: any) => {
        console.error('Failed to clear html5QrcodeScanner. ', error);
      });
    };
  }, []);

  return <div id={id} />;
};

[mebjas]

@nrakochy Thanks for this. Would you like to send a PR with examples for others on using this with React hooks instead of a class component - Happy to review and merge.