fix: Fix hCaptcha updates and add Change Theme demo example (#255)

demo/app/examples/AsyncExample.jsx

@@ -70,9 +70,11 @@ export function AsyncExample() {
         onChalExpired={handleChallengeExpired}
         sentry={false}
       />
-      <button onClick={executeCaptcha}>Execute asynchronously</button>
-      <button onClick={getRespKey}>Get Response Key</button>
-      <button onClick={getResponse}>Get Response</button>
+      <div style={{ display: 'flex', paddingTop: '8px', gap: '8px' }}>
+        <button onClick={executeCaptcha}>Execute asynchronously</button>
+        <button onClick={getRespKey}>Get Response Key</button>
+        <button onClick={getResponse}>Get Response</button>
+      </div>
     </div>
   );
 }

demo/app/examples/ClassExample.jsx

@@ -8,7 +8,11 @@ export class ClassExample extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {isVerified: false, async: false};
+    this.state = {
+      isVerified: false,
+      async: false,
+      theme: 'light',
+    };
     this.captcha = React.createRef();
 
     this.handleChange = this.handleChange.bind(this);
@@ -18,18 +22,19 @@ export class ClassExample extends React.Component {
     this.handleClose = this.handleClose.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleChallengeExpired = this.handleChallengeExpired.bind(this);
+    this.handleThemeChange = this.handleThemeChange.bind(this);
     // Leave languageOverride unset or null for browser autodetection.
     // To force a language, use the code: https://hcaptcha.com/docs/languages
     this.languageOverride = null; // "fr";
   }
 
   handleChange(event) {
-    this.setState({isVerified: true});
+    this.setState({ isVerified: true });
   }
 
   onVerifyCaptcha(token) {
     console.log("Verified: " + token);
-    this.setState({isVerified: true})
+    this.setState({ isVerified: true })
   }
 
   handleSubmit(event) {
@@ -40,7 +45,7 @@ export class ClassExample extends React.Component {
   handleReset(event) {
     event.preventDefault()
     this.captcha.current.resetCaptcha()
-    this.setState({isVerified: false})
+    this.setState({ isVerified: false })
   }
 
   handleOpen() {
@@ -59,8 +64,14 @@ export class ClassExample extends React.Component {
     console.log("HCaptcha [onChalExpired]: The user display of a challenge times out with no answer.");
   }
 
+  handleThemeChange() {
+    this.setState(state => ({
+      theme: state.theme === 'light' ? 'dark' : 'light',
+    }));
+  }
+
   render() {
-    const { isVerified } = this.state;
+    const { isVerified, theme } = this.state;
 
     return (
       <div>
@@ -69,19 +80,22 @@ export class ClassExample extends React.Component {
           onVerify={this.onVerifyCaptcha}
           languageOverride={this.languageOverride}
           sitekey="10000000-ffff-ffff-ffff-000000000001"
-          theme="light"
+          theme={theme}
           onOpen={this.handleOpen}
           onClose={this.handleClose}
           onError={this.handleError}
           onChalExpired={this.handleChallengeExpired}
           sentry={false}
         />
-        {isVerified &&
-          <div>
-            <p>Open your console to see the Verified response.</p>
+        <div style={{ display: 'flex', paddingTop: '8px', gap: '8px' }}>
+          <button onClick={this.handleThemeChange}>Change theme</button>
+          {isVerified && (
             <button onClick={this.handleReset}>Reset Captcha</button>
-          </div>
-        }
+          )}
+        </div>
+        {isVerified && (
+          <p>Open your console to see the Verified response.</p>
+        )}
       </div>
     );
   }

src/index.js

@@ -229,6 +229,8 @@ class HCaptcha extends React.Component {
       }
 
       this.setState({ isRemoved: true }, () => {
+        this.captchaId = '';
+
         hcaptcha.remove(captchaId);
         callback && callback()
       });