Adding an on and off option for the webcam

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
-    "es2015",
-    "stage-0",
-    "react"
+    "@babel/env",
+    "@babel/preset-react"
   ]
 }

.gitignore

@@ -32,5 +32,5 @@ node_modules
 # Optional REPL history
 .node_repl_history
 
-
-lib/worker.js
+#output directory
+lib

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/*.stories.js'],
+  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
+};

README.md

@@ -1,6 +1,14 @@
 [![npm version](https://badge.fury.io/js/react-qr-reader.svg)](https://badge.fury.io/js/react-qr-reader)
 
 ## Introduction
+This project is adopted from [react-qr-reader](https://github.com/JodusNodus/react-qr-reader).
+I made a few changes:
+1. Refactor the React component to not using the deprecated componentWillReceiveProps method.
+2. Uses jsqr-es6 instead of jsqr.
+3. Removed webrtc-adapter, if you need that, please install that package manually
+4. Updated all toolchains and cleanup the NPM package, make it much smaller
+
+In the end, it reduced the final lib from 140KB+ to 60KB+.
 
 A [React](https://facebook.github.io/react/) component for reading QR codes from the webcam. It uses the WebRTC standards for reading webcam data and [jsQR](https://github.com/cozmo/jsQR) is used for detecting QR codes in that data. To optimise the speed and experience, a web-worker is used to offload the heavy QR code algorithm on a separate process. The web worker is inlined and loaded on creation of the component.
 
@@ -17,13 +25,13 @@ A [React](https://facebook.github.io/react/) component for reading QR codes from
 
 ## Install
 
-`npm install --save react-qr-reader`
+`npm install --save react-qr-reader-es6`
 
 ## Example
 
 ```js
 import React, { Component } from 'react'
-import QrReader from 'react-qr-reader'
+import QrReader from 'react-qr-reader-es6'
 
 class Test extends Component {
   state = {

gulpfile.js

@@ -2,6 +2,7 @@ const gulp = require('gulp')
 const fs = require('fs')
 const del = require('del')
 const inlineStr = require('gulp-inline-str')
+const replace = require('gulp-replace')
 const babel = require('gulp-babel')
 const uglify = require('gulp-uglify')
 const concat = require('gulp-concat')
@@ -11,34 +12,37 @@ const babelOptions = JSON.parse(fs.readFileSync('./.babelrc', 'utf8'))
 const paths = {
   scripts: [ 'src/index.js', 'src/getDeviceId.js', 'src/havePropsChanged.js', 'src/errors.js', 'src/createBlob.js' ],
   worker: 'src/worker.js',
-  jsQR: 'node_modules/jsqr/dist/jsQR.js',
+  jsQR: 'node_modules/jsqr-es6/dist/jsQR.js',
   destination: './lib',
 }
 
 gulp.task('clean', function() {
   return del([ paths.destination + '/*.js' ])
 })
 
-gulp.task('worker', [ 'clean' ], function() {
+gulp.task('worker', gulp.series('clean', function() {
   return gulp
     .src([ paths.jsQR, paths.worker ])
     .pipe(concat('worker.js'))
     .pipe(uglify())
+    .pipe(replace('export{jsQR as default};', ''))
     .pipe(gulp.dest(paths.destination))
-})
+}))
 
-gulp.task('build', [ 'worker' ], function() {
+gulp.task('build', gulp.series('worker', function() {
+  gulp.src('src/index.d.ts')
+    .pipe(gulp.dest(paths.destination))
   return gulp
     .src(paths.scripts)
     .pipe(inlineStr({ basePath: paths.destination }))
     .pipe(babel(babelOptions))
     .pipe(gulp.dest(paths.destination))
-})
+}))
 
 // Rerun the task when a file changes
 gulp.task('watch', function() {
-  gulp.watch(paths.scripts, [ 'build' ])
+  gulp.watch(paths.scripts, gulp.series('build'))
 })
 
 // The default task (called when you run `gulp` from cli)
-gulp.task('default', [ 'build' ])
+gulp.task('default', gulp.series('build'))