Added example based on react

2026-08-13 05:31:37 +08:00 · 2016-05-22 22:12:22 +02:00
parent bc2d8c5f5e
commit 1f3ff9bc70
15 changed files with 7677 additions and 4362 deletions
@@ -3,10 +3,19 @@
    "ecmascript": 6,
    "jsx": true
    },
    "plugins": [
        "react"
    ],
    "env": {
        "browser": true,
        "node": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        }
      },
    "ecmaFeatures": {
        "blockBindings": true,
        "forOf": true,
@@ -75,6 +84,7 @@
        "space-infix-ops": 2,
        "max-len" : [1, 120],
        "consistent-return": 2,
-        "yoda": 2
+        "yoda": 2,
        "react/jsx-no-undef": 1
    }
 }
@@ -0,0 +1,4 @@
 {
  "plugins": ["transform-class-properties"],
  "presets": ["es2015-webpack", "stage-0", "react"]
 }
@@ -0,0 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>index</title>
    <meta name="description" content="" />
    <meta name="author" content="Christoph Oberhofer" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../css/fonts.css" />
    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
    <link rel="stylesheet" type="text/css" href="../css/prism.css" />
  </head>
  <body>
      <header>
          <div class="headline">
              <h1>QuaggaJS</h1>
              <h2>An advanced barcode-scanner written in JavaScript</h2>
          </div>
      </header>
    <section id="container" class="container">
        <h3>Scan barcode to input-field</h3>
        <p>Click the <strong>button</strong> next to the input-field
            to start scanning an <strong>EAN-13</strong> barcode</p>
        <div id="react">
        </div>
        <p>This example demonstrates the following features:
            <ul>
                <li>Access to user's camera</li>
                <li>Configuring EAN-Reader</li>
                <li>Use custom mount-point (Query-Selector)</li>
                <li>Start/Stop scanning based on certain events</li>
            </ul>
        </p>
    </section>
          <footer>
        <p>
          &copy; Copyright by Christoph Oberhofer
        </p>
      </footer>
    <script src="static/bundle.js" type="text/javascript"></script>
    <script src="../vendor/prism.js"></script>
  </body>
 </html>
@@ -0,0 +1,24 @@
 {
  "name": "quagga-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Christoph Oberhofer <ch.oberhofer@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-class-properties": "^6.9.0",
    "babel-preset-es2015-webpack": "^6.4.1",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "webpack": "^2.1.0-beta.7"
  },
  "dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  }
 }
@@ -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>
        );
    }
 }
@@ -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();
    }
 }
@@ -0,0 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
 ReactDOM.render(
    <App />,
  document.getElementById('react')
 );
@@ -0,0 +1,23 @@
 module.exports = {
    entry: [
        './src/index.js'
    ],
    devtool: 'source-map',
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules|quagga\.js)/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        modules: [
            'node_modules'
        ]
    },
    output: {
        path: __dirname + '/static',
        publicPath: '/',
        filename: 'bundle.js'
    }
 };
@@ -8,7 +8,7 @@
    "async": "^1.4.2",
    "babel-cli": "^6.5.1",
    "babel-core": "^6.7.4",
-    "babel-eslint": "^6.0.0",
+    "babel-eslint": "^6.0.4",
    "babel-istanbul-loader": "^0.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.1.2",
@@ -38,6 +38,7 @@
    "core-js": "^1.2.1",
    "cross-env": "^1.0.7",
    "eslint": "^1.10.3",
    "eslint-plugin-react": "^5.1.1",
    "grunt": "^0.4.5",
    "grunt-cli": "^0.1.13",
    "grunt-contrib-nodeunit": "^0.4.1",
@@ -6,7 +6,7 @@ module.exports = {
    entry: [
        './src/quagga.js'
    ],
-    devtool: 'inline-source-map',
+    devtool: 'source-map',
    module: {
        loaders: [{
            test: /\.jsx?$/,