Added example based on react

example/react/src/components/App.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Scanner from './Scanner';
+
+export default class App extends React.Component {
+    state = {
+        scanning: false
+    };
+
+    _startScanning = (e) => {
+        e.preventDefault();
+        if (!this.state.scanning) {
+            this.setState({scanning: true});
+        }
+    };
+
+    _stopScanning = () => {
+        this.setState({scanning: false});
+    };
+
+    _handleResult = (result) => {
+        this._stopScanning();
+        this.refs.eanInput.value = result.codeResult.code;
+    }
+    render() {
+        return (
+            <div>
+                <form>
+                    <div className="input-field">
+                        <label>EAN:</label>
+                        <input className="ean" ref="eanInput" type="text" />
+                        <button type="button" onClick={this._startScanning} className="icon-barcode button scan"></button>
+                    </div>
+                </form>
+                {this.state.scanning &&
+                    <Scanner onDetected={this._handleResult} onCancel={this._stopScanning} />}
+            </div>
+        );
+    }
+}

example/react/src/components/Scanner.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Quagga from '../../../../dist/quagga';
+
+export default class Scanner extends React.Component {
+    constructor(props) {
+        super(props);
+        this._scanner = Quagga
+            .decoder({readers: ['ean_reader']})
+            .locator({patchSize: 'medium'})
+            .fromVideo({
+                target: '.overlay__content',
+                constraints: {
+                    width: 800,
+                    height: 600,
+                    facingMode: "environment"
+                }
+            });
+        this._onCancel = this._onCancel.bind(this);
+    }
+    _onCancel(e) {
+        e.preventDefault();
+        this.props.onCancel();
+    }
+    render() {
+        return (
+            <div className="overlay">
+                <div className="overlay__content">
+                    <div className="overlay__close" onClick={this._onCancel}>X</div>
+                </div>
+            </div>
+        );
+    }
+    componentDidMount() {
+        this._scanner
+            .addEventListener('detected', this.props.onDetected)
+            .start();
+    }
+
+    componentWillUnmount() {
+        this._scanner
+            .removeEventListener('detected', this.props.onDetected)
+            .stop();
+    }
+}

example/react/src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+
+ReactDOM.render(
+    <App />,
+  document.getElementById('react')
+);