@hcaptcha/react-hcaptcha 0.3.8 → 1.1.0

package/README.md

@@ -47,12 +47,71 @@ import { default as RenamedCaptcha } from '../utils/captcha';
 </FormComponent>
 ```
 
+#### Programmatic Usage
+In the event you want to call the hCaptcha client API directly, you can do so by using the hook `useRef` and waiting for `onLoad` to be called. By waiting for `onLoad` the hCaptcha API will be ready and the hCaptcha client will have been setup. See the following example:
+
+```js
+import { useEffect, useRef, useState } from "react";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
+
+export default function Form() {
+  const [token, setToken] = useState(null);
+  const captchaRef = useRef(null);
+
+  const onLoad = () => {
+    // this reaches out to the hCaptcha JS API and runs the
+    // execute function on it. you can use other functions as
+    // documented here:
+    // https://docs.hcaptcha.com/configuration#jsapi
+    captchaRef.current.execute();
+  };
+
+  useEffect(() => {
+
+    if (token)
+      console.log(`hCaptcha Token: ${token}`);
+
+  }, [token]);
+
+  return (
+    <form>
+      <HCaptcha
+        sitekey="your-sitekey"
+        onLoad={onLoad}
+        onVerify={setToken}
+        ref={captchaRef}
+      />
+    </form>
+  );
+}
+```
+
 #### Advanced usage
 
 In most real-world implementations, you'll probably be using a form library such as [Formik](https://github.com/jaredpalmer/formik) or [React Hook Form](https://github.com/react-hook-form/react-hook-form).
 
 In these instances, you'll most likely want to use `ref` to handle the callbacks as well as handle field-level validation of a `captcha` field. For an example of this, you can view this [CodeSandbox](https://codesandbox.io/s/react-hcaptchaform-example-forked-ngxge?file=/src/Form.jsx).  This `ref` will point to an instance of the [hCaptcha API](https://docs.hcaptcha.com/configuration#jsapi) where can you interact directly with it.
 
+#### Passing in fields like `rqdata` to `execute()`
+
+Passing an object into the `execute(yourObj)` call will send it through to the underlying JS API. This enables support for Enterprise features like `rqdata`. A simple example is below:
+
+```
+const {sitekey, rqdata} = props;
+const captchaRef = React.useRef<HCaptcha>(null);
+
+const onLoad = () => {
+  const executePayload = {};
+  if (rqdata) {
+    executePayload['rqdata'] = rqdata;
+  }
+  captchaRef.current?.execute(executePayload);
+};
+
+return <HCaptcha ref={captchaRef} onLoad={onLoad} sitekey={sitekey} {...props} />;
+```
+
+
 ### Props
 
 |Name|Values/Type|Required|Default|Description|
@@ -81,6 +140,9 @@ In these instances, you'll most likely want to use `ref` to handle the callbacks
 |`onVerify`|`token, eKey`|When challenge is completed. The response `token` and an `eKey` (session id) are passed along.|
 |`onExpire`|-|When the current token expires.|
 |`onLoad`|-|When the hCaptcha API loads.|
+|`onOpen`|-|When the user display of a challenge starts.|
+|`onClose`|-|When the user dismisses a challenge.|
+|`onChalExpired`|-|When the user display of a challenge times out with no answer.|
 
 ### Methods
 

package/dist/index.js

@@ -4,8 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -18,10 +16,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
@@ -47,7 +41,7 @@ var mountCaptchaScript = function mountCaptchaScript() {
     });
   };
 
-  var domain = params.apihost || "https://hcaptcha.com";
+  var domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
   var script = document.createElement("script");
   script.src = "".concat(domain, "/1/api.js?render=explicit&onload=hcaptchaOnLoad");
@@ -70,12 +64,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
     _this.renderCaptcha = _this.renderCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.removeCaptcha = _this.removeCaptcha.bind((0, _assertThisInitialized2["default"])(_this)); // Event Handlers
+    _this.removeCaptcha = _this.removeCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.isReady = _this.isReady.bind((0, _assertThisInitialized2["default"])(_this)); // Event Handlers
 
     _this.handleOnLoad = _this.handleOnLoad.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleSubmit = _this.handleSubmit.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleExpire = _this.handleExpire.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleError = _this.handleError.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleOpen = _this.handleOpen.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleChallengeExpired = _this.handleChallengeExpired.bind((0, _assertThisInitialized2["default"])(_this));
     var isApiReady = typeof hcaptcha !== 'undefined';
     _this.ref = React.createRef();
     _this.state = {
@@ -131,11 +129,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$state = this.state,
-          isApiReady = _this$state.isApiReady,
-          isRemoved = _this$state.isRemoved,
-          captchaId = _this$state.captchaId;
-      if (!isApiReady || isRemoved) return; // Reset any stored variables / timers when unmounting
+      var captchaId = this.state.captchaId;
+
+      if (!this.isReady()) {
+        return;
+      } // Reset any stored variables / timers when unmounting
+
 
       hcaptcha.reset(captchaId);
       hcaptcha.remove(captchaId);
@@ -170,39 +169,50 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderCaptcha",
-    value: function renderCaptcha() {
+    value: function renderCaptcha(onReady) {
       var isApiReady = this.state.isApiReady;
-      if (!isApiReady) return; //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-
-      var captchaId = hcaptcha.render(this.ref.current, _objectSpread(_objectSpread({}, this.props), {}, {
+      if (!isApiReady) return;
+      var renderParams = Object.assign({
+        "open-callback": this.handleOpen,
+        "close-callback": this.handleClose,
         "error-callback": this.handleError,
+        "chalexpired-callback": this.handleChallengeExpired,
         "expired-callback": this.handleExpire,
         "callback": this.handleSubmit
-      }));
+      }, this.props, {
+        hl: this.props.hl || this.props.languageOverride,
+        languageOverride: undefined
+      }); //Render hCaptcha widget and provide necessary callbacks - hCaptcha
+
+      var captchaId = hcaptcha.render(this.ref.current, renderParams);
       this.setState({
         isRemoved: false,
         captchaId: captchaId
+      }, function () {
+        onReady && onReady();
       });
     }
   }, {
     key: "resetCaptcha",
     value: function resetCaptcha() {
-      var _this$state2 = this.state,
-          isApiReady = _this$state2.isApiReady,
-          isRemoved = _this$state2.isRemoved,
-          captchaId = _this$state2.captchaId;
-      if (!isApiReady || isRemoved) return; // Reset captcha state, removes stored token and unticks checkbox
+      var captchaId = this.state.captchaId;
+
+      if (!this.isReady()) {
+        return;
+      } // Reset captcha state, removes stored token and unticks checkbox
+
 
       hcaptcha.reset(captchaId);
     }
   }, {
     key: "removeCaptcha",
     value: function removeCaptcha(callback) {
-      var _this$state3 = this.state,
-          isApiReady = _this$state3.isApiReady,
-          isRemoved = _this$state3.isRemoved,
-          captchaId = _this$state3.captchaId;
-      if (!isApiReady || isRemoved) return;
+      var captchaId = this.state.captchaId;
+
+      if (!this.isReady()) {
+        return;
+      }
+
       this.setState({
         isRemoved: true
       }, function () {
@@ -218,20 +228,21 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       this.setState({
         isApiReady: true
       }, function () {
-        // trigger onLoad if it exists
-        var onLoad = _this3.props.onLoad;
-        if (onLoad) onLoad(); // render captcha
-
-        _this3.renderCaptcha();
+        // render captcha and wait for captcha id
+        _this3.renderCaptcha(function () {
+          // trigger onLoad if it exists
+          var onLoad = _this3.props.onLoad;
+          if (onLoad) onLoad();
+        });
       });
     }
   }, {
     key: "handleSubmit",
     value: function handleSubmit(event) {
       var onVerify = this.props.onVerify;
-      var _this$state4 = this.state,
-          isRemoved = _this$state4.isRemoved,
-          captchaId = _this$state4.captchaId;
+      var _this$state = this.state,
+          isRemoved = _this$state.isRemoved,
+          captchaId = _this$state.captchaId;
       if (typeof hcaptcha === 'undefined' || isRemoved) return;
       var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
 
@@ -243,11 +254,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "handleExpire",
     value: function handleExpire() {
       var onExpire = this.props.onExpire;
-      var _this$state5 = this.state,
-          isApiReady = _this$state5.isApiReady,
-          isRemoved = _this$state5.isRemoved,
-          captchaId = _this$state5.captchaId;
-      if (!isApiReady || isRemoved) return;
+      var captchaId = this.state.captchaId;
+
+      if (!this.isReady()) {
+        return;
+      }
+
       hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
 
       if (onExpire) onExpire();
@@ -256,24 +268,60 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "handleError",
     value: function handleError(event) {
       var onError = this.props.onError;
-      var _this$state6 = this.state,
-          isApiReady = _this$state6.isApiReady,
-          isRemoved = _this$state6.isRemoved,
-          captchaId = _this$state6.captchaId;
-      if (!isApiReady || isRemoved) return;
+      var captchaId = this.state.captchaId;
+
+      if (!this.isReady()) {
+        return;
+      }
+
       hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
 
       if (onError) onError(event);
     }
+  }, {
+    key: "isReady",
+    value: function isReady() {
+      var _this$state2 = this.state,
+          isApiReady = _this$state2.isApiReady,
+          isRemoved = _this$state2.isRemoved;
+      return isApiReady && !isRemoved;
+    }
+  }, {
+    key: "handleOpen",
+    value: function handleOpen() {
+      if (!this.isReady() || !this.props.onOpen) {
+        return;
+      }
+
+      this.props.onOpen();
+    }
+  }, {
+    key: "handleClose",
+    value: function handleClose() {
+      if (!this.isReady() || !this.props.onClose) {
+        return;
+      }
+
+      this.props.onClose();
+    }
+  }, {
+    key: "handleChallengeExpired",
+    value: function handleChallengeExpired() {
+      if (!this.isReady() || !this.props.onChalExpired) {
+        return;
+      }
+
+      this.props.onChalExpired();
+    }
   }, {
     key: "execute",
     value: function execute() {
       var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      var _this$state7 = this.state,
-          isApiReady = _this$state7.isApiReady,
-          isRemoved = _this$state7.isRemoved,
-          captchaId = _this$state7.captchaId;
-      if (!isApiReady || isRemoved) return;
+      var captchaId = this.state.captchaId;
+
+      if (!this.isReady()) {
+        return;
+      }
 
       if (opts && (0, _typeof2["default"])(opts) !== "object") {
         opts = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "0.3.8",
+  "version": "1.1.0",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "files": [

package/src/index.js

@@ -17,7 +17,7 @@ const mountCaptchaScript = (params={}) => {
     });
   };
 
-  const domain = params.apihost || "https://hcaptcha.com";
+  const domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
 
   const script = document.createElement("script");
@@ -39,12 +39,16 @@ class HCaptcha extends React.Component {
       this.renderCaptcha = this.renderCaptcha.bind(this);
       this.resetCaptcha  = this.resetCaptcha.bind(this);
       this.removeCaptcha = this.removeCaptcha.bind(this);
+      this.isReady = this.isReady.bind(this);
 
       // Event Handlers
       this.handleOnLoad = this.handleOnLoad.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
       this.handleExpire = this.handleExpire.bind(this);
       this.handleError  = this.handleError.bind(this);
+      this.handleOpen = this.handleOpen.bind(this);
+      this.handleClose = this.handleClose.bind(this);
+      this.handleChallengeExpired = this.handleChallengeExpired.bind(this);
 
       const isApiReady = typeof hcaptcha !== 'undefined';
 
@@ -88,8 +92,11 @@ class HCaptcha extends React.Component {
     }
 
     componentWillUnmount() {
-        const { isApiReady, isRemoved, captchaId } = this.state;
-        if(!isApiReady || isRemoved) return
+        const { captchaId } = this.state;
+
+        if (!this.isReady()) {
+          return;
+        }
 
         // Reset any stored variables / timers when unmounting
         hcaptcha.reset(captchaId);
@@ -119,34 +126,46 @@ class HCaptcha extends React.Component {
       }
     }
 
-    renderCaptcha() {
+    renderCaptcha(onReady) {
       const { isApiReady } = this.state;
       if (!isApiReady) return;
 
+      const renderParams = Object.assign({
+        "open-callback"       : this.handleOpen,
+        "close-callback"      : this.handleClose,
+        "error-callback"      : this.handleError,
+        "chalexpired-callback": this.handleChallengeExpired,
+        "expired-callback"    : this.handleExpire,
+        "callback"            : this.handleSubmit,
+      }, this.props, {
+        hl: this.props.hl || this.props.languageOverride,
+        languageOverride: undefined
+      });
+
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-      const captchaId = hcaptcha.render(this.ref.current,
-        {
-          ...this.props,
-          "error-callback"      : this.handleError,
-          "expired-callback"    : this.handleExpire,
-          "callback"            : this.handleSubmit,
-        });
+      const captchaId = hcaptcha.render(this.ref.current, renderParams);
 
-      this.setState({ isRemoved: false, captchaId });
+      this.setState({ isRemoved: false, captchaId }, () => {
+        onReady && onReady();
+      });
     }
 
     resetCaptcha() {
-      const { isApiReady, isRemoved, captchaId } = this.state;
+      const { captchaId } = this.state;
 
-      if (!isApiReady || isRemoved) return
+      if (!this.isReady()) {
+        return;
+      }
       // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId)
     }
 
     removeCaptcha(callback) {
-      const { isApiReady, isRemoved, captchaId } = this.state;
+      const { captchaId } = this.state;
 
-      if (!isApiReady || isRemoved) return
+      if (!this.isReady()) {
+        return;
+      }
 
       this.setState({ isRemoved: true }, () => {
         hcaptcha.remove(captchaId);
@@ -156,12 +175,13 @@ class HCaptcha extends React.Component {
 
     handleOnLoad () {
       this.setState({ isApiReady: true }, () => {
-        // trigger onLoad if it exists
-        const { onLoad } = this.props;
-        if (onLoad) onLoad();
 
-        // render captcha
-        this.renderCaptcha();
+        // render captcha and wait for captcha id
+        this.renderCaptcha(() => {
+            // trigger onLoad if it exists
+            const { onLoad } = this.props;
+            if (onLoad) onLoad();
+        });
       });
     }
 
@@ -178,9 +198,12 @@ class HCaptcha extends React.Component {
 
     handleExpire () {
       const { onExpire } = this.props;
-      const { isApiReady, isRemoved, captchaId } = this.state;
+      const { captchaId } = this.state;
+
+      if (!this.isReady()) {
+        return;
+      }
 
-      if (!isApiReady || isRemoved) return
       hcaptcha.reset(captchaId) // If hCaptcha runs into error, reset captcha - hCaptcha
 
       if (onExpire) onExpire();
@@ -188,18 +211,52 @@ class HCaptcha extends React.Component {
 
     handleError (event) {
       const { onError } = this.props;
-      const { isApiReady, isRemoved, captchaId } = this.state;
+      const { captchaId } = this.state;
 
-      if (!isApiReady || isRemoved) return
+      if (!this.isReady()) {
+        return;
+      }
 
       hcaptcha.reset(captchaId) // If hCaptcha runs into error, reset captcha - hCaptcha
       if (onError) onError(event);
     }
 
+    isReady () {
+      const { isApiReady, isRemoved } = this.state;
+
+      return isApiReady && !isRemoved;
+    }
+
+    handleOpen () {
+      if (!this.isReady() || !this.props.onOpen) {
+        return;
+      }
+
+      this.props.onOpen();
+    }
+
+    handleClose () {
+      if (!this.isReady() || !this.props.onClose) {
+        return;
+      }
+
+      this.props.onClose();
+    }
+
+    handleChallengeExpired () {
+      if (!this.isReady() || !this.props.onChalExpired) {
+        return;
+      }
+
+      this.props.onChalExpired();
+    }
+
     execute (opts = null) {
-      const { isApiReady, isRemoved, captchaId } = this.state;
+      const { captchaId } = this.state;
 
-      if (!isApiReady || isRemoved) return;
+      if (!this.isReady()) {
+        return;
+      }
 
       if (opts && typeof opts !== "object") {
         opts = null;

package/types/index.d.ts

@@ -15,6 +15,9 @@ interface HCaptchaState {
 
 interface HCaptchaProps {
   onExpire?: () => any;
+  onOpen?: () => any;
+  onClose?: () => any;
+  onChalExpired?: () => any;
   onError?: (event: string) => any;
   onVerify?: (token: string) => any;
   onLoad?: () => any;