Add example for using this library with React

README.md

@@ -31,7 +31,7 @@ Working on adding support for more and more platforms. If you find a platform or
 | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br/>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br/>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /><br/> Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" /><br/>Opera | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera-mini/opera-mini_48x48.png" alt="Opera-Mini" width="24px" height="24px" /><br/> Opera Mini | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/uc/uc_24x24.png" alt="UC" width="24px" height="24px" /> <br/> UC
 | --------- | --------- | --------- | --------- |  --------- | --------- |
 |![](./assets/done.png)| ![](assets/done.png)| ![](assets/done.png)| ![](assets/done.png)| ![](assets/partial.png) | ![](assets/partial.png) 
- 
+
 ### IOS
 
 | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_24x24.png" alt="Safari" width="24px" height="24px" /><br/>Safari | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br/>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br/>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /><br/> Edge 
@@ -43,9 +43,9 @@ Working on adding support for more and more platforms. If you find a platform or
 ### Framework support
 The library can be easily used with several other frameworks, I have been adding examples for a few of them and would continue to add more.
 
-|<img src="./assets/html5.png" width="30px">| <img src="./assets/vuejs.png" width="30px">|<img src="./assets/electron.png" width="30px">
-| -------- | -------- | -------- |
-| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron)
+|<img src="./assets/html5.png" width="30px">| <img src="./assets/vuejs.png" width="30px">|<img src="./assets/electron.png" width="30px"> | <img src="./assets/react.svg" width="30px">
+| -------- | -------- | -------- | -------- |
+| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](./examples/react)
 
 ## Description - [View Demo](https://blog.minhazav.dev/research/html5-qrcode.html)
 

examples/react/README.md

@@ -0,0 +1,89 @@
+# html5-qrcode with React
+<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K" width="200px"><br>
+[reactjs.org](https://reactjs.org/) | `Support Level` = `Strong`
+
+## How to build a `React Plugin / Component` using `html5-qrcode`
+We shall be using React's recommendation on [Integrating with Other Libraries](https://reactjs.org/docs/integrating-with-other-libraries.html) to create a plugin for `React`.
+
+
+### Download the latest library
+You can download this from [Github release page](https://github.com/mebjas/html5-qrcode/releases) or [npm](https://www.npmjs.com/package/html5-qrcode). And include this in `index.html`.
+
+```html
+<script src="html5-qrcode.min.js"></script>
+```
+
+### Create a new component `Html5QrcodeScannerPlugin`
+You can write a custom plugin like this:
+
+```js
+class Html5QrcodeScannerPlugin extends React.Component {
+    componentDidMount() {
+        // 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;
+        }
+
+        var config = createConfig(this.props);
+        var verbose = this.props.verbose === true;
+
+        // Suceess callback is required.
+        if (!(this.props.qrCodeSuccessCallback )) {
+            throw 'qrCodeSuccessCallback is required callback.';
+        }
+
+        this.html5QrcodeScanner = new Html5QrcodeScanner(
+            'qr-code-full-region', config, verbose);
+        this.html5QrcodeScanner.render(
+            this.props.qrCodeSuccessCallback, this.props.qrCodeErrorCallback);
+    }
+
+    componentWillUnmount() {
+        // TODO(mebjas): See if there is a better way to handle
+        //  promise in `componentWillUnmount`.
+        this.html5QrcodeScanner.clear().catch(error => {
+            console.error('Failed to clear html5QrcodeScanner. ', error);
+        });
+    }
+
+    render() {
+        return <div id={'qr-code-full-region'} />;
+    }
+}
+```
+
+### Use this new component in your React app
+A very crude example would be to
+```js
+ReactDOM.render(
+    <div>
+        <h1>Html5Qrcode React example!</h1>
+        <Html5QrcodeScannerPlugin
+            fps={10}
+            qrBox={250}
+            disableFlip={false}
+            qrCodeSuccessCallback={mesg => { console.log(mesg); }}
+            qrCodeErrorCallback={error => { console.error(error); }} />
+    </div>,
+    document.getElementById('root')
+);
+```
+
+### Example implementation
+You can find an example impelementation at [example.html](./example.html).
+
+### TODO(mebjas): Create and publish `Html5QrcodeScanner` as proper react plugin
+It'd be great to publish this as a proper React plugin so every developer doesn't have to write custom React plugin to use this library.

examples/react/example.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Hello World</title>
+  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+  <!-- Don't use this in production: -->
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="../../minified/html5-qrcode.min.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    class Html5QrcodeScannerPlugin extends React.Component {
+      componentDidMount() {
+        var $this = this;
+
+        // 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;
+        }
+
+        var config = createConfig(this.props);
+        var verbose = this.props.verbose === true;
+
+        // Suceess callback is required.
+        if (!(this.props.qrCodeSuccessCallback )) {
+          throw 'qrCodeSuccessCallback is required callback.';
+        }
+
+        this.html5QrcodeScanner = new Html5QrcodeScanner(
+          'qr-code-full-region', config, verbose);
+        this.html5QrcodeScanner.render(
+          this.props.qrCodeSuccessCallback, this.props.qrCodeErrorCallback);
+      }
+
+      componentWillUnmount() {
+        // TODO(mebjas): See if there is a better way to handle promise in `componentWillUnmount`.
+        this.html5QrcodeScanner.clear().catch(err => {
+          console.error('Failed to clear html5QrcodeScanner. '. err);
+        });
+      }
+
+      render() {
+        return <div id={'qr-code-full-region'} />;
+      }
+    }
+
+    ReactDOM.render(
+      <div>
+          <h1>Html5Qrcode React example!</h1>
+          <Html5QrcodeScannerPlugin
+            fps={10}
+            qrBox={250}
+            disableFlip={false}
+            qrCodeSuccessCallback={mesg => {console.log(mesg);}}
+            qrCodeErrorCallback={error => {console.error(error);}} />
+      </div>,
+      document.getElementById('root')
+    );
+  </script>
+</body>
+</html>