refactor with async-script-loader

- this simplifies the usage by a lot. It is no longer needed to add a
script tag to the html

Author: dozoisch

README.md

@@ -15,17 +15,9 @@ npm install --save react-google-recaptcha
 
 ## Usage
 
-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.
-
-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
+You can then use the reCAPTCHA. The default require, imports a wrapped component that loads the reCAPTCHA script asynchronously.
 
 ```jsx
 var React = require("react");
@@ -37,9 +29,9 @@ function onChange(value) {
 
 React.render(
 <ReCATPCHA
-  sitekey="Your sitekey"
+  refs="recaptcha"
+  sitekey="Your client site key"
   onChange={onChange}
-  onloadCallbackName="onloadcallback"
 />, document.body);
 ```
 
@@ -51,20 +43,45 @@ Other properties can be used to customised the rendering.
 |:---- | ---- | ------ |
 | sitekey | string | The API client key |
 | 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. |
 
 ## Component API
 
+**To retrieve the component, when using the wrapper, do `this.refs.recaptcha.getComponent()`**
+
 The component also has some utility functions that can be called.
 
 - `getValue()` returns the value of the captcha field
 - `reset()` forces reset. See the [JavaScript API doc][js_api]
 
+### 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
 - tests
 - examples

karma.conf.js

@@ -1,5 +1,5 @@
 /* eslint no-var: 0 */
-require("babel/register");
+require("./register-babel");
 
 var webpackConfig = require("./webpack/test.config.js");
 var isCI = process.env.CONTINUOUS_INTEGRATION === "true";
@@ -19,19 +19,19 @@ module.exports = function (config) {
     ],
 
     preprocessors: {
-      "test/index.js": ["webpack", "sourcemap"]
+      "test/index.js": ["webpack", "sourcemap",],
     },
 
     webpack: webpackConfig,
 
     webpackMiddleware: {
-      noInfo: isCI
+      noInfo: isCI,
     },
 
-    reporters: ["mocha", "chai"],
+    reporters: ["mocha"],
 
     mochaReporter: {
-      output: "autowatch"
+      output: "autowatch",
     },
 
     port: 9876,
@@ -47,6 +47,6 @@ module.exports = function (config) {
     captureTimeout: 60000,
     browserNoActivityTimeout: 30000,
 
-    singleRun: isCI
+    singleRun: isCI,
   });
 };

package.json

@@ -2,14 +2,15 @@
   "name": "react-google-recaptcha",
   "version": "0.1.0",
   "description": "React Component Wrapper for Google reCAPTCHA",
-  "main": "lib/recaptcha.js",
+  "main": "lib/recaptcha-wrapper.js",
   "directories": {
     "lib": "lib/"
   },
   "scripts": {
     "build": "node run-babel tools/build.js",
     "lint": "eslint src test tools webpack karma.conf.js",
-    "test": "karma start --single-run"
+    "test": "karma start --single-run",
+    "test-watch": "karma start"
   },
   "repository": {
     "type": "git",
@@ -32,15 +33,15 @@
     "react": ">=0.13"
   },
   "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",
     "fs-promise": "~0.3.1",
     "karma": "~0.12.31",
@@ -53,9 +54,12 @@
     "karma-sourcemap-loader": "~0.3.4",
     "karma-webpack": "~1.5.0",
     "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"
   }
 }

register-babel.js

@@ -0,0 +1,4 @@
+require("babel/register")({
+  ignore: /node_modules/,
+  optional: ["es7.objectRestSpread"],
+});

run-babel

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 /* eslint no-var: 0 */
 var path = require("path");
-require("babel/register");
+require("./register-babel");
 var mod = require(path.join(__dirname, process.argv[2]));
 
 if (typeof mod === "function") {

src/recaptcha-wrapper.js

@@ -0,0 +1,14 @@
+"use strict";
+import React, { PropTypes } from "react";
+
+import ReCAPTCHA from "./recaptcha";
+import makeAsyncScriptLoader from "react-async-script";
+
+const callbackName = "onloadcallback";
+const URL = `https://www.google.com/recaptcha/api.js?onload=${callbackName}&render=explicit`;
+const globalName = "grecaptcha";
+
+export default makeAsyncScriptLoader(ReCAPTCHA, URL, {
+  callbackName: callbackName,
+  globalName:globalName,
+});

src/recaptcha.js

@@ -1,23 +1,19 @@
 /*global grecaptcha*/
 "use strict";
-import React from "react";
-const PropTypes = React.PropTypes;
+import React, { PropTypes } from "react";
 
 const ReCAPTCHA = React.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,
   },
 
-  getDefaultState() {
+  getInitialState() {
     return {};
   },
 
@@ -26,20 +22,19 @@ const ReCAPTCHA = React.createClass({
       theme: "light",
       type: "image",
       tabindex: 0,
-      elementId: "react-reCAPTCHA",
     };
   },
 
   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);
     }
     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);
     }
   },
 
@@ -51,9 +46,10 @@ const ReCAPTCHA = React.createClass({
     }
   },
 
-  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,
         callback: this.props.onChange,
         theme: this.props.theme,
@@ -63,29 +59,23 @@ const ReCAPTCHA = React.createClass({
       });
       this.setState({
         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" />
     );
   }
 });

test/index.js

@@ -1,3 +1,3 @@
 import "es5-shim";
-const testsContext = require.context(".", true, /Spec$/);
+const testsContext = require.context(".", true, /-spec$/);
 testsContext.keys().forEach(testsContext);

test/recaptcha-spec.js

@@ -0,0 +1,68 @@
+import React from "react";
+import ReactTestUtils from "react/lib/ReactTestUtils";
+import ReCAPTCHA from "../src/recaptcha";
+
+describe("ReCAPTCHA", function () {
+  let callbackName = "onloadcallback";
+
+  afterEach(function () {
+    delete window.grecaptcha;
+    delete window.callbackName;
+  });
+
+  it("Rendered Component should be a div", function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ReCAPTCHA siteKey="xxx" onloadCallbackName={callbackName} />
+    );
+    assert.equal(instance.getDOMNode().nodeName, "DIV");
+  });
+  it("Rendered Component should contained passed props", function () {
+    let props = {
+      className: "TheClassName",
+      id: "superdefinedId",
+    };
+    let className = "TheClassName";
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ReCAPTCHA siteKey="xxx" {...props} />
+    );
+    assert.equal(instance.getDOMNode().id, props.id);
+    assert.match(instance.getDOMNode().className, new RegExp(props.className));
+  });
+
+  it("should register a callback on the window when grecaptcha is not loaded", function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ReCAPTCHA siteKey="xxx" />
+    );
+    assert.isNotNull(window[callbackName]);
+  });
+  it("should call grecaptcha.render, when it is already loaded", function (done) {
+    let grecaptchaMock = {
+      render() {
+        done();
+      },
+    };
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ReCAPTCHA siteKey="xxx" grecaptcha={grecaptchaMock} />
+    );
+  });
+  it("reset, should call grecaptcha.reset with the widget id", function (done) {
+    let grecaptchaMock = {
+      render() {
+        return "someWidgetId";
+      },
+
+      reset(widgetId) {
+        assert.isNotNull(widgetId);
+        done();
+      },
+    };
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ReCAPTCHA siteKey="xxx" grecaptcha={grecaptchaMock} />
+    );
+    instance.reset();
+  });
+  describe("Expired", function () {
+    it("should call onChange with null when response is expired");
+    it("should call onExpired when response is expired");
+  });
+});