docs: add an example for the HOC

Author: t49tran

example/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { GoogleReCaptchaProvider } from '../src/google-recaptcha-provider';
 import { GoogleRecaptchaExample } from './google-recaptcha-example';
+import { WithGoogleRecaptchaExample } from './with-google-recaptcha-example';
 
 ReactDom.render(
   <GoogleReCaptchaProvider
@@ -11,6 +12,7 @@ ReactDom.render(
   >
     <h2>Google Recaptcha Example</h2>
     <GoogleRecaptchaExample />
+    <WithGoogleRecaptchaExample />
   </GoogleReCaptchaProvider>,
   document.getElementById('app')
 );

example/with-google-recaptcha-example.tsx

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import {
+  IWithGoogleReCaptchaProps,
+  withGoogleReCaptcha
+} from '../src/with-google-recaptcha';
+
+class ReCaptchaComponent extends Component<{}, { token?: string }> {
+  constructor(props: {}) {
+    super(props);
+
+    this.state = { token: undefined };
+  }
+
+  handleVerifyRecaptcha = async () => {
+    const { executeRecaptcha } = (this.props as IWithGoogleReCaptchaProps)
+      .googleReCaptchaProps;
+
+    if (!executeRecaptcha) {
+      console.log('Recaptcha has not been loaded');
+
+      return;
+    }
+
+    const token = await executeRecaptcha('homepage');
+
+    this.setState({ token });
+  };
+
+  render() {
+    const { token } = this.state;
+    return (
+      <div>
+        <h3>With Google Recaptcha HOC Example</h3>
+        <button onClick={this.handleVerifyRecaptcha}>Verify Recaptcha</button>
+        <p>Token: {token}</p>
+      </div>
+    );
+  }
+}
+
+export const WithGoogleRecaptchaExample =
+  withGoogleReCaptcha(ReCaptchaComponent);