From 8944be9ee2ebd4970043ca69c8355b600635b6c1 Mon Sep 17 00:00:00 2001
From: Pedro Palhari <pedropalhari@gmail.com>
Date: Wed, 23 Sep 2020 12:05:33 -0300
Subject: [PATCH] Updated both example.js and README to a hook based approach
 (fix #30) (#8)

---
 README.md           | 66 ++++++++++++++++++++-------------------------
 examples/example.js | 62 +++++++++++++++++++-----------------------
 2 files changed, 56 insertions(+), 72 deletions(-)

diff --git a/README.md b/README.md
index 80bbcc4..5e6d22f 100644
--- 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
index fb8f589..246ce93 100644
--- 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);
   }
-}
\ No newline at end of file
+
+  return (
+    <div>
+      <QrReader
+        delay={500}
+        style={{
+          width: 320,
+          height: 240,
+        }}
+        onError={onError}
+        onScan={onScan}
+      />
+      <p>{codeRead}</p>
+    </div>
+  );
+}
+
+export default Example;