@hcaptcha/react-hcaptcha - npm Package Compare versions

Comparing version 0.3.9 to 0.3.10

dist/index.js

@@ -7,4 +7,2 @@ "use strict";
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -22,6 +20,2 @@
 
-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); }; }
@@ -177,9 +171,13 @@
       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({
         "error-callback": this.handleError,
         "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({
@@ -186,0 +184,0 @@ isRemoved: false,

package.json

 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "types": "types/index.d.ts",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -50,2 +50,41 @@ # React hCaptcha Component Library
 
+#### 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
@@ -57,2 +96,22 @@
 
+#### 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
@@ -59,0 +118,0 @@

src/index.js

@@ -126,10 +126,13 @@ const React = require('react');
 
+      const renderParams = Object.assign({
+        "error-callback"      : this.handleError,
+        "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);
 
@@ -136,0 +139,0 @@ this.setState({ isRemoved: false, captchaId }, () => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30278

increased by3.06%

Lines of code

497

increased by0.2%

Number of lines in readme file

190

increased by45.04%

No dependency changes