recaptcha-v3-react - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/index.js

@@ -1,1 +0,1 @@
-module.exports=function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=1)}([function(e,t){e.exports=require("react")},function(e,t,n){var r=n(2).default,o=n(4).default;e.exports={ReCaptcha:r,loadReCaptcha:o}},function(e,t,n){"use strict";n.r(t);var a=n(0),u=n.n(a);n(3);function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var s,y=function(){return"undefined"!=typeof window&&void 0!==window.grecaptcha},r=function(e){function o(e){var t,n,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),n=this,(t=!(r=f(o).call(this,e))||"object"!==i(r)&&"function"!=typeof r?p(n):r).execute=t.execute.bind(p(p(t))),t.state={ready:y()},t.state.ready||(s=setInterval(t._updateReadyState.bind(p(p(t))),1e3)),t}var t,n,r;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&l(e,t)}(o,a["Component"]),t=o,(n=[{key:"componentDidMount",value:function(){this.state.ready&&this.execute()}},{key:"componentDidUpdate",value:function(e,t){this.state.ready&&!t.ready&&this.execute()}},{key:"componentWillUnmount",value:function(){clearInterval(s)}},{key:"execute",value:function(){var e=this.props,t=e.sitekey,n=e.verifyCallback,r=e.action;this.state.ready&&window.grecaptcha.execute(t,{action:r}).then(function(e){n(e)})}},{key:"_updateReadyState",value:function(){y()&&(this.setState(function(){return{ready:!0}}),clearInterval(s))}},{key:"render",value:function(){return this.state.ready?u.a.createElement("div",{id:this.props.elementID,"data-verifycallbackname":this.props.verifyCallbackName}):u.a.createElement("div",{id:this.props.elementID,className:"g-recaptcha"})}}])&&c(t.prototype,n),r&&c(t,r),o}();r.defaultProps={elementID:"g-recaptcha",verifyCallbackName:"verifyCallback"},t.default=r},function(e,t){e.exports=require("prop-types")},function(e,t,n){"use strict";n.r(t);t.default=function(e){var t=document.createElement("script");t.src="https://www.google.com/recaptcha/api.js?render=".concat(e),document.body.appendChild(t)}}]);
+module.exports=function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=1)}([function(e,t){e.exports=require("react")},function(e,t,n){var r=n(2).default,o=n(4).default;e.exports={ReCaptcha:r,loadReCaptcha:o}},function(e,t,n){"use strict";n.r(t);var a=n(0),u=n.n(a);n(3);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var d,y=function(){return"undefined"!=typeof window&&void 0!==window.grecaptcha},r=function(e){function o(e){var n,t,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),t=this,r=f(o).call(this,e),s(p(p(n=!r||"object"!==c(r)&&"function"!=typeof r?p(t):r)),"componentDidMount",function(){n.state.ready&&void 0!==n.execute&&n.execute()}),s(p(p(n)),"componentDidUpdate",function(e,t){n.state.ready&&!t.ready&&void 0!==n.execute&&n.execute()}),s(p(p(n)),"componentWillUnmount",function(){clearInterval(d)}),n.execute=n.execute.bind(p(p(n))),n.state={ready:y()},n.state.ready||(d=setInterval(n._updateReadyState.bind(p(p(n))),1e3)),n}var t,n,r;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&l(e,t)}(o,a["Component"]),t=o,(n=[{key:"execute",value:function(){var e=this.props,t=e.sitekey,n=e.verifyCallback,r=e.action;this.state.ready&&window.grecaptcha.execute(t,{action:r}).then(function(e){n(e)})}},{key:"_updateReadyState",value:function(){y()&&(this.setState(function(){return{ready:!0}}),clearInterval(d))}},{key:"render",value:function(){return this.state.ready?u.a.createElement("div",{id:this.props.elementID,"data-verifycallbackname":this.props.verifyCallbackName}):u.a.createElement("div",{id:this.props.elementID,className:"g-recaptcha"})}}])&&i(t.prototype,n),r&&i(t,r),o}();r.defaultProps={elementID:"g-recaptcha",verifyCallbackName:"verifyCallback"},t.default=r},function(e,t){e.exports=require("prop-types")},function(e,t,n){"use strict";n.r(t);t.default=function(e){var t=e.key,n=e.id,r=e.onSuccess,o=e.onError;if(!document.getElementById(n)){var a=document.createElement("script");a.id=n,a.async=!0,a.src="https://www.google.com/recaptcha/api.js?render=".concat(t),a.onload=function(){r()},a.onerror=function(e){o(e)},document.body.appendChild(a)}}}]);

example/index.js

 import React, { Component } from 'react'
-import { ReCaptcha, loadRecaptcha } from 'react-recaptcha-v3'
-
+import { ReCaptcha, loadRecaptcha } from '../dist'
+import uuid from 'uuidv4'
 const verifyCallback = token => {
-  // Here you will get the final token!!!
   console.log(token, 'verifycallback')
@@ -10,30 +9,43 @@ }
 class Example extends Component {
+  state = {
+    loaded: false
+  }
+
   componentDidMount () {
-    loadRecaptcha('your_site_key')
+    loadRecaptcha({
+      key: 'your_site_key',
+      id: uuid(),
+      onSuccess: () => {
+      },
+      onError: (e) => {
+        console.log('loadRecaptcha', e)
+      }
+    })
   }
 
-  render () {
-    return (
-      <div>
-        <ReCaptcha
-          action='main'
-          sitekey='your_recapcha_key'
-          verifyCallback={verifyCallback}
-        />
+  render = () =>
+    this.state.loaded
+      ? (
+        <div>
+          <ReCaptcha
+            action='main'
+            sitekey='your_recapcha_key'
+            verifyCallback={verifyCallback}
+          />
 
-        <h2>Google ReCaptcha with React </h2>
+          <h2>Google ReCaptcha with React </h2>
 
-        <code>
+          <code>
           1. Add <strong>your site key</strong> in the ReCaptcha component. <br />
           2. Check <strong>console</strong> to see the token.
-        </code>
+          </code>
 
-        <header>
-          <h1>Thanks for using `react-recaptcha-google`</h1>
-        </header>
-      </div>
-    )
-  }
+          <header>
+            <h1>Thanks for using `react-recaptcha-google`</h1>
+          </header>
+        </div>
+      )
+      : null
 }
 
 export default Example

package.json

 {
   "name": "recaptcha-v3-react",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "This library helps to integrate google recaptcha into your react project easily. ",
@@ -18,6 +18,6 @@ "keywords": [
     "start": "webpack --watch",
-    "build": "webpack",
+    "build": "rm -rf ./dist && webpack",
     "lint": "npx eslint ./src",
-    "clean": "rm -rf ./package-lock.json ./node_modules/",
-    "prepare": "rm -rf ./dist && npm run build"
+    "clean": "rm -rf ./package-lock.json ./node_modules/ && npm i",
+    "publish": "npm publish ."
   },
@@ -40,2 +40,3 @@ "repository": {
     "@babel/core": "7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-proposal-object-rest-spread": "7.0.0",
@@ -42,0 +43,0 @@ "@babel/plugin-transform-react-jsx": "7.1.6",

README.md

@@ -39,3 +39,8 @@ # recaptcha-v3-react
   componentDidMount () {
-    loadRecaptcha('your_site_key')
+    loadRecaptcha({
+      key:'your_site_key',
+      id: 'uniqueId,
+      onSuccess: () => {},
+      onError: (e) => {}
+    })
   }
@@ -42,0 +47,0 @@

src/loadReCaptcha.js

@@ -1,9 +0,25 @@
-const loadReCaptcha = siteKey => {
-  const script = document.createElement('script')
+const loadReCaptcha = ({ key, id, onSuccess, onError }) => {
+  const pastScript = document.getElementById(id)
 
-  script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`
+  if (!pastScript) {
+    const script = document.createElement('script')
 
-  document.body.appendChild(script)
+    script.id = id
+
+    script.async = true
+
+    script.src = `https://www.google.com/recaptcha/api.js?render=${key}`
+
+    script.onload = () => {
+      onSuccess()
+    }
+
+    script.onerror = (e) => {
+      onError(e)
+    }
+
+    document.body.appendChild(script)
+  }
 }
 
 export default loadReCaptcha

src/ReCaptcha.js

@@ -10,15 +10,2 @@ import React, { Component } from 'react'
   action: PropTypes.string.isRequired
-  //  expiredCallback: PropTypes.func,
-  //  render: PropTypes.string,
-  //  onloadCallback: PropTypes.func,
-  //  className: PropTypes.string,
-  //  onloadCallbackName: PropTypes.string,
-  //  theme: PropTypes.string,
-  //  type: PropTypes.string,
-
-  //  expiredCallbackName: PropTypes.string,
-  //  size: PropTypes.string,
-  //  tabindex: PropTypes.string,
-  //  hl: PropTypes.string,
-  //  badge: PropTypes.string
 }
@@ -28,15 +15,3 @@
   elementID: 'g-recaptcha',
-  verifyCallbackName: 'verifyCallback',
-  //  onloadCallback: undefined,
-  //  onloadCallbackName: 'onloadCallback',
-  //   expiredCallback: undefined,
-  //  expiredCallbackName: 'expiredCallback',
-  //  render: 'onload',
-  //   theme: 'light',
-  //   type: 'image',
-  //  size: 'normal',
-  //  tabindex: '0',
-  //   hl: 'en',
-  //  badge: 'bottomright',
-  //   render: 'explicit'
+  verifyCallbackName: 'verifyCallback'
 }
@@ -58,3 +33,2 @@
       ready: isReady()
-      //  widget: null,
     }
@@ -67,9 +41,11 @@
 
-  componentDidMount () {
+  componentDidMount = () => {
     if (this.state.ready) {
-      this.execute()
+      if (typeof this.execute !== 'undefined') {
+        this.execute()
+      }
     }
   }
 
-  componentDidUpdate (_, prevState) {
+  componentDidUpdate = (_, prevState) => {
     if (
@@ -79,7 +55,9 @@ this.state.ready &&
     ) {
-      this.execute()
+      if (typeof this.execute !== 'undefined') {
+        this.execute()
+      }
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount = () => {
     clearInterval(readyCheck)
@@ -89,26 +67,12 @@ }
   execute () {
-    // const {
-    //   ready,
-    // //   widget
-    // } = this.state
-
     const {
       sitekey,
       verifyCallback,
-      action,
-    //   elementID
+      action
     } = this.props
 
-    // var widgetId
-    // console.log('executing, ready:', ready);
-
     if (this.state.ready) {
-      // widgetId = window.grecaptcha.render(elementID, {
-      //   'sitekey': sitekey,
-      //   'callback': verifyCallback
-      // });
       window.grecaptcha.execute(sitekey, { action })
         .then(token => {
           verifyCallback(token)
-          // console.log(window.grecaptcha.getResponse(widgetId))
         })
@@ -115,0 +79,0 @@ }

No alert changes

Improved metrics

Number of lines in readme file

73

7.35%

Worsened metrics

Total package byte prevSize

12428

-3.94%

Dev dependency count

42

2.44%

Number of package files

7

-12.5%

Lines of code

151

-6.21%

No dependency changes