From 2509454e5e0082d92c71e97fdfd7f0963f8b8b87 Mon Sep 17 00:00:00 2001
From: Vasyl Nahuliak <vasyl.nahuliak@gmail.com>
Date: Fri, 24 Jan 2025 15:42:43 +0100
Subject: [PATCH] docs: rewrite example using hooks

---
 Example.App.js | 78 ++++++++++++++++++++++++--------------------------
 README.md      | 29 +++++++++++--------
 2 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/Example.App.js b/Example.App.js
index 34498be..43fa68e 100644
--- a/Example.App.js
+++ b/Example.App.js
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState, useRef } from 'react';
 import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 import ConfirmHcaptcha from '@hcaptcha/react-native-hcaptcha';
 
@@ -6,18 +6,18 @@ import ConfirmHcaptcha from '@hcaptcha/react-native-hcaptcha';
 const siteKey = '00000000-0000-0000-0000-000000000000';
 const baseUrl = 'https://hcaptcha.com';
 
-export default class App extends React.Component {
-  state = {
-    code: null,
-  };
-  onMessage = event => {
+const App = () => {
+  const [code, setCode] = useState(null);
+  const captchaForm = useRef(null);
+
+  const onMessage = event => {
     if (event && event.nativeEvent.data) {
       if (['cancel'].includes(event.nativeEvent.data)) {
-        this.captchaForm.hide();
-        this.setState({ code: event.nativeEvent.data });
+        captchaForm.current.hide();
+        setCode(event.nativeEvent.data);
       } else if (['error'].includes(event.nativeEvent.data)) {
-        this.captchaForm.hide();
-        this.setState({ code: event.nativeEvent.data });
+        captchaForm.current.hide();
+        setCode(event.nativeEvent.data);
         console.log('Verification failed', event.nativeEvent.data);
       } else if (event.nativeEvent.data === 'expired') {
         event.reset();
@@ -26,42 +26,39 @@ export default class App extends React.Component {
         console.log('Visual challenge opened');
       } else {
         console.log('Verified code from hCaptcha', event.nativeEvent.data);
-        this.captchaForm.hide();
+        captchaForm.current.hide();
         event.markUsed();
-        this.setState({ code: event.nativeEvent.data });
+        setCode(event.nativeEvent.data);
       }
     }
   };
 
-  render() {
-    let { code } = this.state;
-    return (
-      <View style={styles.container}>
-        <ConfirmHcaptcha
-          ref={_ref => (this.captchaForm = _ref)}
-          siteKey={siteKey}
-          baseUrl={baseUrl}
-          languageCode="en"
-          onMessage={this.onMessage}
-        />
-        <TouchableOpacity
-          onPress={() => {
-            this.captchaForm.show();
-          }}>
-          <Text style={styles.paragraph}>Click to launch</Text>
-        </TouchableOpacity>
-        {code && (
-          <Text style={{ alignSelf: 'center' }}>
-            {'passcode or status: '}
-            <Text style={{ color: 'darkviolet', fontWeight: 'bold', fontSize: 6 }}>
-              {code}
-            </Text>
+  return (
+    <View style={styles.container}>
+      <ConfirmHcaptcha
+        ref={captchaForm}
+        siteKey={siteKey}
+        baseUrl={baseUrl}
+        languageCode="en"
+        onMessage={onMessage}
+      />
+      <TouchableOpacity
+        onPress={() => {
+          captchaForm.current.show();
+        }}>
+        <Text style={styles.paragraph}>Click to launch</Text>
+      </TouchableOpacity>
+      {code && (
+        <Text style={{ alignSelf: 'center' }}>
+          {`passcode or status: `}
+          <Text style={{ color: 'darkviolet', fontWeight: 'bold', fontSize: 6 }}>
+            {code}
           </Text>
-        )}
-      </View>
-    );
-  }
-}
+        </Text>
+      )}
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -78,3 +75,4 @@ const styles = StyleSheet.create({
   },
 });
 
+export default App;
diff --git a/README.md b/README.md
index d6f3b7a..db4f431 100644
--- a/README.md
+++ b/README.md
@@ -55,28 +55,33 @@ By default, this value is 120 seconds. So, an `expired` error will be emitted to
 Once you've utilized hCaptcha's token, call `markUsed` on the event object in `onMessage`:
 
 ```js
-  onMessage = event => {
+  const onMessage = event => {
     if (event && event.nativeEvent.data) {
       if (['cancel'].includes(event.nativeEvent.data)) {
-        this.captchaForm.hide();
+        captchaForm.current.hide();
       } else if (['error'].includes(event.nativeEvent.data)) {
-        this.captchaForm.hide();
+        captchaForm.current.hide();
         // handle error
       } else {
-        this.captchaForm.hide();
+        captchaForm.current.hide();
         const token = event.nativeEvent.data;
-        // utlize token and call markUsed once you done with it
+        // utilize token and call markUsed once you are done with it
         event.markUsed();
       }
     }
   };
-  ...
-  <ConfirmHcaptcha
-    ref={_ref => (this.captchaForm = _ref)}
-    siteKey={siteKey}
-    languageCode="en"
-    onMessage={this.onMessage}
-  />
+
+  const captchaForm = useRef(null);
+
+  return (
+    <ConfirmHcaptcha
+      ref={captchaForm}
+      siteKey={siteKey}
+      languageCode="en"
+      onMessage={onMessage}
+    />
+  );
+```
 ```
 
 ### Handling errors and retry