Updated both example.js and README to a hook based approach (fix kyba…

…rg#30) (kybarg#8)
pedropalhari · Sep 23, 2020 · 8944be9 · 8944be9
1 parent fd1f4fd
commit 8944be9
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -18,46 +18,38 @@ Thanks to initial repo https://github.com/JodusNodus/react-qr-reader
 ## Example
 
 ```js
-import React, { Component } from 'react'
-import QrReader from 'react-qr-scanner'
-
-class Test extends Component {
-  constructor(props){
-    super(props)
-    this.state = {
-      delay: 100,
-      result: 'No result',
-    }
-
-    this.handleScan = this.handleScan.bind(this)
-  }
-  handleScan(data){
-    this.setState({
-      result: data,
-    })
-  }
-  handleError(err){
-    console.error(err)
+import React, { useState } from "react";
+import QrReader from "react-qr-scanner";
+
+function Example() {
+  const [codeRead, setCodeRead] = useState("");
+
+  function onScan(result) {
+    console.log(`Identified: ${result}`);
+    setCodeRead(result);
   }
-  render(){
-    const previewStyle = {
-      height: 240,
-      width: 320,
-    }
-
-    return(
-      <div>
-        <QrReader
-          delay={this.state.delay}
-          style={previewStyle}
-          onError={this.handleError}
-          onScan={this.handleScan}
-          />
-        <p>{this.state.result}</p>
-      </div>
-    )
+
+  function onError(error) {
+    console.error(error);
   }
+
+  return (
+    <div>
+      <QrReader
+        delay={500}
+        style={{
+          width: 320,
+          height: 240,
+        }}
+        onError={onError}
+        onScan={onScan}
+      />
+      <p>{codeRead}</p>
+    </div>
+  );
 }
+
+export default Example;
 ```
 
 ## Props

diff --git a/examples/example.js b/examples/example.js
@@ -1,40 +1,32 @@
-import React, { Component } from 'react'
-import QrReader from 'react-qr-scanner'
+import React, { useState } from "react";
+import QrReader from "react-qr-scanner";
 
-class Example extends Component {
-  constructor(props){
-    super(props)
-    this.state = {
-      delay: 500,
-      result: 'No result',
-    }
+function Example() {
+  const [codeRead, setCodeRead] = useState("");
 
-    this.handleScan = this.handleScan.bind(this)
+  function onScan(result) {
+    console.log(`Identified: ${result}`);
+    setCodeRead(result);
   }
-  handleScan(result){
-    if(result){
-      this.setState({ result })
-    }
-  }
-  handleError(err){
-    console.error(err)
-  }
-  render(){
-    const previewStyle = {
-      height: 240,
-      width: 320,
-    }
 
-    return(
-      <div>
-        <QrReader
-          delay={this.state.delay}
-          style={previewStyle}
-          onError={this.handleError}
-          onScan={this.handleScan}
-          />
-        <p>{this.state.result}</p>
-      </div>
-    )
+  function onError(error) {
+    console.error(error);
   }
-}
+
+  return (
+    <div>
+      <QrReader
+        delay={500}
+        style={{
+          width: 320,
+          height: 240,
+        }}
+        onError={onError}
+        onScan={onScan}
+      />
+      <p>{codeRead}</p>
+    </div>
+  );
+}
+
+export default Example;