react-google-recaptcha - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

HISTORY.md

 #History
 
+##0.2.0
+- Now loads the script using react-async-script! Usage is now way simpler
+
 ##0.1.0
@@ -4,0 +7,0 @@ - Migrated to ES6

lib/recaptcha.js

@@ -5,2 +5,6 @@ "use strict";
 
+var _objectWithoutProperties = function (obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; };
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 Object.defineProperty(exports, "__esModule", {
@@ -10,5 +14,5 @@ value: true
 
-var _React = require("react");
+var _React$PropTypes = require("react");
 
-var _React2 = _interopRequireWildcard(_React);
+var _React$PropTypes2 = _interopRequireWildcard(_React$PropTypes);
 
@@ -18,18 +22,13 @@ /*global grecaptcha*/
 
-var PropTypes = _React2["default"].PropTypes;
-
-var ReCAPTCHA = _React2["default"].createClass({
+var ReCAPTCHA = _React$PropTypes2["default"].createClass({
   displayName: "react-reCAPTCHA",
   propTypes: {
-    sitekey: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onloadCallbackName: PropTypes.string.isRequired, // Name on the script tag onload query parameter
-    theme: PropTypes.oneOf(["dark", "light"]),
-    type: PropTypes.oneOf(["image", "audio"]),
-    elementId: PropTypes.string,
-    tabindex: PropTypes.number,
-    onLoad: PropTypes.func,
-    onExpired: PropTypes.func },
+    sitekey: _React$PropTypes.PropTypes.string.isRequired,
+    onChange: _React$PropTypes.PropTypes.func.isRequired,
+    theme: _React$PropTypes.PropTypes.oneOf(["dark", "light"]),
+    type: _React$PropTypes.PropTypes.oneOf(["image", "audio"]),
+    tabindex: _React$PropTypes.PropTypes.number,
+    onExpired: _React$PropTypes.PropTypes.func },
 
-  getDefaultState: function getDefaultState() {
+  getInitialState: function getInitialState() {
     return {};
@@ -42,9 +41,8 @@ },
       type: "image",
-      tabindex: 0,
-      elementId: "react-reCAPTCHA" };
+      tabindex: 0 };
   },
 
   getValue: function getValue() {
-    if (typeof grecaptcha !== "undefined" && this.state.widgetId) {
-      return grecaptcha.getResponse(this.state.widgetId);
+    if (this.props.grecaptcha && this.state.widgetId) {
+      return this.props.grecaptcha.getResponse(this.state.widgetId);
     }
@@ -55,4 +53,4 @@ return null;
   reset: function reset() {
-    if (typeof grecaptcha !== "undefined" && this.state.widgetId) {
-      grecaptcha.reset(this.state.widgetId);
+    if (this.props.grecaptcha && this.state.widgetId) {
+      this.props.grecaptcha.reset(this.state.widgetId);
     }
@@ -69,5 +67,6 @@ },
 
-  explicitRender: function explicitRender() {
-    if (typeof grecaptcha !== "undefined") {
-      var _id = grecaptcha.render(this.refs.captcha.getDOMNode(), {
+  explicitRender: function explicitRender(cb) {
+    if (this.props.grecaptcha && !this.state.widgetId) {
+      this.refs.captcha.getDOMNode();
+      var id = this.props.grecaptcha.render(this.refs.captcha.getDOMNode(), {
         sitekey: this.props.sitekey,
@@ -80,24 +79,27 @@ callback: this.props.onChange,
       this.setState({
-        widgetId: _id });
+        widgetId: id }, cb);
     }
   },
 
-  handleLoad: function handleLoad() {
+  componentDidMount: function componentDidMount() {
     this.explicitRender();
-    if (this.props.onLoad) {
-      this.props.onLoad();
-    }
   },
 
-  componentDidMount: function componentDidMount() {
-    // If script is not loaded, set the callback on window.
-    if (typeof grecaptcha === "undefined") {
-      window[this.props.onloadCallbackName] = this.handleLoad;
-    } else {
-      this.handleLoad();
-    }
+  componentDidUpdate: function componentDidUpdate() {
+    this.explicitRender();
   },
 
   render: function render() {
-    return _React2["default"].createElement("div", { ref: "captcha", id: this.props.elementId });
+    // consume properties owned by the reCATPCHA, pass the rest to the div so the user can style it.
+    var _props = this.props;
+    var sitekey = _props.sitekey;
+    var onChange = _props.onChange;
+    var theme = _props.theme;
+    var type = _props.type;
+    var tabindex = _props.tabindex;
+    var onExpired = _props.onExpired;
+
+    var childProps = _objectWithoutProperties(_props, ["sitekey", "onChange", "theme", "type", "tabindex", "onExpired"]);
+
+    return _React$PropTypes2["default"].createElement("div", _extends({}, childProps, { ref: "captcha" }));
   }
@@ -104,0 +106,0 @@ });

package.json

 {
   "name": "react-google-recaptcha",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React Component Wrapper for Google reCAPTCHA",
-  "main": "lib/recaptcha.js",
+  "main": "lib/recaptcha-wrapper.js",
   "directories": {
@@ -12,3 +12,4 @@ "lib": "lib/"
     "lint": "eslint src test tools webpack karma.conf.js",
-    "test": "karma start --single-run"
+    "test": "karma start --single-run",
+    "test-watch": "karma start"
   },
@@ -36,11 +37,11 @@ "repository": {
   "devDependencies": {
-    "babel": "~5.0.10",
-    "babel-core": "~5.0.10",
+    "babel": "~5.0.12",
+    "babel-core": "~5.0.12",
     "babel-eslint": "~2.0.2",
     "babel-loader": "~5.0.0",
-    "chai": "^2.2.0",
+    "chai": "~2.2.0",
     "child-process-promise": "~1.0.2",
     "colors": "~1.0.3",
-    "es5-shim": "~4.1.0",
-    "eslint": "~0.18.0",
+    "es5-shim": "~4.1.1",
+    "eslint": "~0.19.0",
     "eslint-plugin-react": "~2.1.0",
@@ -58,7 +59,10 @@ "fs-promise": "~0.3.1",
     "lodash": "~3.6.0",
-    "mocha": "~2.2.3",
+    "mocha": "~2.2.4",
     "react": "~0.13.1",
-    "webpack": "~1.8.0",
-    "yargs": "~3.7.0"
+    "webpack": "~1.8.4",
+    "yargs": "~3.7.1"
+  },
+  "dependencies": {
+    "react-async-script": "~0.1.1"
   }
 }

README.md

 # react-google-recaptcha
 
 [![Build Status][travis.img]][travis.url]
+[![npm version][npm.img]][npm.url]
 [![Dependencies][deps.img]][deps.url]
@@ -17,14 +18,6 @@ [![Dev Dependencies][devdeps.img]][devdeps.url]
 
-First of all [sign up for an API key pair][signup]. Then add the Google reCAPTCHA script tag to your html.
+All you need to do is [sign up for an API key pair][signup]. You will need the client key.
 
-The property set after `onload` is important and will be needed at render. This props is used to define a global callback, called by the Google script once it is loaded.
+You can then use the reCAPTCHA. The default require, imports a wrapped component that loads the reCAPTCHA script asynchronously.
 
-See the [Google reCAPTCHA docs][docs] for more info.
-
-```html
-<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onloadCallback" async defer></script>
-```
-
-You can then use the reCAPTCHA
-
 ```jsx
@@ -40,9 +33,9 @@ var React = require("react");
 <ReCATPCHA
-  sitekey="Your sitekey"
+  refs="recaptcha"
+  sitekey="Your client site key"
   onChange={onChange}
-  onloadCallbackName="onloadcallback"
 />, document.body);
 ```
 
-###Rendering Props
+### Rendering Props
 
@@ -55,7 +48,5 @@ Other properties can be used to customised the rendering.
 | onChange | func | The function to be called when the user completes successfully the captcha |
-| onloadCallbackName | string | The name the script will call onload. **This must be the same provided on script tag.**
 | theme | enum | *optional* `light` or `dark` The them of the widget *(__defaults:__ light)*
 | type | enum | *optional* `image` or `audio` The type of initial captcha *(__defaults:__ image)*
 | tabindex | number | *optional* The tabindex on the element *(__default:__ 0)*
-| onLoad | func | *optional* callback called when the widget has rendered
 | onExpired | func | *optional* callback when the challenge is expired and has to be redone by user. By default it will call the onChange with null to signify expired callback. |
@@ -65,2 +56,4 @@
 
+**To retrieve the component, when using the wrapper, do `this.refs.recaptcha.getComponent()`**
+
 The component also has some utility functions that can be called.
@@ -71,2 +64,27 @@
 
+### Advanced usage
+
+You can also use the barebone components doing the following. Using that component will oblige you to manage the grecaptcha dep and load the script by yourself.
+
+```jsx
+var React = require("react");
+var ReCATPCHA = require("react-google-recaptcha/lib/recaptcha");
+
+var grecaptchaObject = grecaptcha // You must provide access to the google grecaptcha object.
+
+function onChange(value) {
+  console.log("Captcha value:", value);
+}
+
+React.render(
+<ReCATPCHA
+  refs="recaptcha"
+  sitekey="Your client site key"
+  onChange={onChange}
+  grecaptcha={grecaptchaObject}
+/>, document.body);
+```
+
+
+
 ## To Come Soon
@@ -81,2 +99,4 @@ - tests
 [travis.url]: https://travis-ci.org/dozoisch/react-google-recaptcha
+[npm.img]: https://badge.fury.io/js/react-google-recaptcha.svg
+[npm.url]: http://badge.fury.io/js/react-google-recaptcha
 [deps.img]: https://david-dm.org/dozoisch/react-google-recaptcha.svg
@@ -83,0 +103,0 @@ [deps.url]: https://david-dm.org/dozoisch/react-google-recaptcha

src/recaptcha.js

 /*global grecaptcha*/
 "use strict";
-import React from "react";
-const PropTypes = React.PropTypes;
+import React, { PropTypes } from "react";
 
@@ -11,12 +10,9 @@ const ReCAPTCHA = React.createClass({
     onChange: PropTypes.func.isRequired,
-    onloadCallbackName: PropTypes.string.isRequired, // Name on the script tag onload query parameter
     theme: PropTypes.oneOf(["dark", "light"]),
     type: PropTypes.oneOf(["image", "audio"]),
-    elementId: PropTypes.string,
     tabindex: PropTypes.number,
-    onLoad: PropTypes.func,
     onExpired: PropTypes.func,
   },
 
-  getDefaultState() {
+  getInitialState() {
     return {};
@@ -30,3 +26,2 @@ },
       tabindex: 0,
-      elementId: "react-reCAPTCHA",
     };
@@ -36,4 +31,4 @@ },
   getValue() {
-    if (typeof grecaptcha !== "undefined" && this.state.widgetId) {
-      return grecaptcha.getResponse(this.state.widgetId);
+    if (this.props.grecaptcha && this.state.widgetId) {
+      return this.props.grecaptcha.getResponse(this.state.widgetId);
     }
@@ -44,4 +39,4 @@ return null;
   reset() {
-    if (typeof grecaptcha !== "undefined" && this.state.widgetId) {
-      grecaptcha.reset(this.state.widgetId);
+    if (this.props.grecaptcha && this.state.widgetId) {
+      this.props.grecaptcha.reset(this.state.widgetId);
     }
@@ -58,5 +53,6 @@ },
 
-  explicitRender() {
-    if (typeof grecaptcha !== "undefined") {
-      let id = grecaptcha.render(this.refs.captcha.getDOMNode(), {
+  explicitRender(cb) {
+    if (this.props.grecaptcha && !this.state.widgetId) {
+      this.refs.captcha.getDOMNode();
+      let id = this.props.grecaptcha.render(this.refs.captcha.getDOMNode(), {
         sitekey: this.props.sitekey,
@@ -71,25 +67,19 @@ callback: this.props.onChange,
         widgetId: id,
-      });
+      }, cb);
     }
   },
 
-  handleLoad() {
+  componentDidMount() {
     this.explicitRender();
-    if (this.props.onLoad) {
-      this.props.onLoad();
-    }
   },
 
-  componentDidMount() {
-    // If script is not loaded, set the callback on window.
-    if (typeof grecaptcha === "undefined") {
-      window[this.props.onloadCallbackName] = this.handleLoad;
-    } else {
-      this.handleLoad();
-    }
+  componentDidUpdate() {
+    this.explicitRender();
   },
 
   render() {
+    // consume properties owned by the reCATPCHA, pass the rest to the div so the user can style it.
+    let { sitekey, onChange, theme, type, tabindex, onExpired, ...childProps } = this.props;
     return (
-      <div ref="captcha" id={this.props.elementId} />
+      <div {...childProps} ref="captcha" />
     );
@@ -96,0 +86,0 @@ }

webpack/strategies/test.js

@@ -16,4 +16,3 @@ import _ from "lodash";
   }
-
   return config;
 }

webpack/test.config.js

 import config from "./webpack.config";
 
-export default config({test: true});
+export default config({ test: true });

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15895

increased by18.45%

Number of package files

16

increased by23.08%

Lines of code

261

increased by9.21%

Number of lines in readme file

106

increased by23.26%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedreact-async-script@~0.1.1

• + Addedreact-async-script@0.1.1(transitive)