use 1.0.0 react-async-script, update readme, update tests

Author: hartzis

README.md

@@ -17,15 +17,13 @@ All you need to do is [sign up for an API key pair][signup]. You will need the c
 You can then use the reCAPTCHA. The default require imports a wrapped component that loads the reCAPTCHA script asynchronously.
 
 ```jsx
-var React = require("react").default;
-var render = require("react-dom").render
-var ReCAPTCHA = require("react-google-recaptcha");
+import ReCAPTCHA from "react-google-recaptcha";
 
 function onChange(value) {
   console.log("Captcha value:", value);
 }
 
-render(
+ReactDOM.render(
   <ReCAPTCHA
     ref="recaptcha"
     sitekey="Your client site key"
@@ -68,7 +66,7 @@ window.recaptchaOptions = {
 
 ## Component API
 
-The component also has some utility functions that can be called.
+The component instance also has some utility functions that can be called. These can be accessed via `ref`.
 
 - `getValue()` returns the value of the captcha field
 - `getWidgetId()` returns the recaptcha widget Id
@@ -85,23 +83,16 @@ Starting with 0.7.0, the component now supports invisible options. See the [reCA
 With the invisible option, you need to handle things a bit differently. You will need to call the `execute` method yourself.
 
 ```jsx
-var React = require("react").default;
-var render = require("react-dom").render
-var ReCAPTCHA = require("react-google-recaptcha");
-
-function onChange(value) {
-  console.log("Captcha value:", value);
-}
+import ReCAPTCHA from "react-google-recaptcha";
 
 let captcha;
 
-render(
+ReactDOM.render(
   <form onSubmit={() => { captcha.execute(); }}>
     <ReCAPTCHA
       ref={(el) => { captcha = el; }}
       size="invisible"
       sitekey="Your client site key"
-      onChange={onChange}
     />
   </form>,
   document.body
@@ -114,21 +105,14 @@ render(
 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").default;
-var render = require("react-dom").render
-var ReCAPTCHA = require("react-google-recaptcha/lib/recaptcha");
+import { ReCAPTCHA } from "react-google-recaptcha";
 
-var grecaptchaObject = grecaptcha // You must provide access to the google grecaptcha object.
-
-function onChange(value) {
-  console.log("Captcha value:", value);
-}
+const grecaptchaObject = window.grecaptcha // You must provide access to the google grecaptcha object.
 
 render(
   <ReCAPTCHA
-    ref="recaptcha"
+    ref={(r) => this.recaptcha = r}
     sitekey="Your client site key"
-    onChange={onChange}
     grecaptcha={grecaptchaObject}
   />,
   document.body
@@ -137,17 +121,7 @@ render(
 
 ## Notes
 
-### React < 15.5
-With version prior to 15.5
-```shell
-npm install --save [email protected]
-```
-
-### React 0.13
-With 0.13, install version 0.4.1
-```shell
-npm install --save [email protected]
-```
+Pre `1.0.0` and `React < 15.5.*` support details in [0.14.0](https://github.com/dozoisch/react-google-recaptcha/tree/v0.14.0).
 
 [travis.img]: https://travis-ci.org/dozoisch/react-google-recaptcha.svg?branch=master
 [travis.url]: https://travis-ci.org/dozoisch/react-google-recaptcha

package.json

@@ -2,8 +2,8 @@
   "name": "react-google-recaptcha",
   "version": "0.14.0",
   "description": "React Component Wrapper for Google reCAPTCHA",
-  "main": "lib/recaptcha-wrapper.js",
-  "module": "lib/es/recaptcha-wrapper.js",
+  "main": "lib/index.js",
+  "module": "lib/es/index.js",
   "directories": {
     "lib": "lib/"
   },
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/dozoisch/react-google-recaptcha",
   "peerDependencies": {
-    "react": ">=15.5.0"
+    "react": ">=16.4.1"
   },
   "devDependencies": {
     "babel-cli": "^6.0.0",
@@ -67,13 +67,13 @@
     "mocha": "~2.3.3",
     "mt-changelog": "^0.6.2",
     "phantomjs": "^1.9.18",
-    "react": "^15.5.0",
-    "react-dom": "^15.5.0",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
     "release-script": "^0.5.3",
     "webpack": "~1.14.0"
   },
   "dependencies": {
-    "prop-types": ">=15.5.0",
-    "react-async-script": ">=0.11.0"
+    "prop-types": "^15.5.0",
+    "react-async-script": "1.0.0-rc.1"
   }
 }

src/index.js

@@ -0,0 +1,5 @@
+import RecaptchaWrapper from './recaptcha-wrapper';
+import ReCAPTCHA from "./recaptcha";
+
+export default RecaptchaWrapper;
+export { ReCAPTCHA };

src/recaptcha-wrapper.js

@@ -17,9 +17,8 @@ const callbackName = "onloadcallback";
 const globalName = "grecaptcha";
 const initialOptions = getOptions();
 
-export default makeAsyncScriptLoader(ReCAPTCHA, getURL, {
+export default makeAsyncScriptLoader(getURL, {
   callbackName,
   globalName,
   removeOnMount: initialOptions.removeOnMount || false,
-  exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"],
-});
+})(ReCAPTCHA);

src/recaptcha.js

@@ -4,39 +4,37 @@ import PropTypes from "prop-types";
 export default class ReCAPTCHA extends React.Component {
   constructor() {
     super();
-    this.state = {};
     this.handleExpired = this.handleExpired.bind(this);
     this.handleRecaptchaRef = this.handleRecaptchaRef.bind(this);
   }
 
   getValue() {
-    if (this.props.grecaptcha && this.state.widgetId !== undefined) {
-      return this.props.grecaptcha.getResponse(this.state.widgetId);
+    if (this.props.grecaptcha && this._widgetId !== undefined) {
+      return this.props.grecaptcha.getResponse(this._widgetId);
     }
     return null;
   }
 
   getWidgetId() {
-    if (this.props.grecaptcha && this.state.widgetId !== undefined) {
-      return this.state.widgetId;
+    if (this.props.grecaptcha && this._widgetId !== undefined) {
+      return this._widgetId;
     }
     return null;
   }
 
   execute() {
     const { grecaptcha } = this.props;
-    const { widgetId } = this.state;
 
-    if (grecaptcha && widgetId !== undefined) {
-      return grecaptcha.execute(widgetId);
+    if (grecaptcha && this._widgetId !== undefined) {
+      return grecaptcha.execute(this._widgetId);
     } else {
       this._executeRequested = true;
     }
   }
 
   reset() {
-    if (this.props.grecaptcha && this.state.widgetId !== undefined) {
-      this.props.grecaptcha.reset(this.state.widgetId);
+    if (this.props.grecaptcha && this._widgetId !== undefined) {
+      this.props.grecaptcha.reset(this._widgetId);
     }
   }
 
@@ -48,10 +46,10 @@ export default class ReCAPTCHA extends React.Component {
     }
   }
 
-  explicitRender(cb) {
-    if (this.props.grecaptcha && this.props.grecaptcha.render && this.state.widgetId === undefined) {
+  explicitRender() {
+    if (this.props.grecaptcha && this.props.grecaptcha.render && this._widgetId === undefined) {
       const wrapper = document.createElement("div");
-      const id = this.props.grecaptcha.render(wrapper, {
+      this._widgetId = this.props.grecaptcha.render(wrapper, {
         sitekey: this.props.sitekey,
         callback: this.props.onChange,
         theme: this.props.theme,
@@ -63,12 +61,8 @@ export default class ReCAPTCHA extends React.Component {
         badge: this.props.badge,
       });
       this.captcha.appendChild(wrapper);
-
-      this.setState({
-        widgetId: id,
-      }, cb);
     }
-    if (this._executeRequested && this.props.grecaptcha && this.state.widgetId !== undefined) {
+    if (this._executeRequested && this.props.grecaptcha && this._widgetId !== undefined) {
       this._executeRequested = false;
       this.execute();
     }
@@ -83,7 +77,7 @@ export default class ReCAPTCHA extends React.Component {
   }
 
   componentWillUnmount() {
-    if (this.state.widgetId !== undefined) {
+    if (this._widgetId !== undefined) {
       while (this.captcha.firstChild) {
         this.captcha.removeChild(this.captcha.firstChild);
       }

test/recaptcha-spec.js

@@ -37,35 +37,46 @@ describe("ReCAPTCHA", () => {
   });
   it("reset, should call grecaptcha.reset with the widget id", (done) => {
     const grecaptchaMock = {
-      render () {
-        return "someWidgetId";
-      },
-
+      render () { return "someWidgetId"; },
       reset (widgetId) {
         assert.isNotNull(widgetId);
         done();
       },
     };
-    const instance = ReactTestUtils.renderIntoDocument(
-      <ReCAPTCHA sitekey="xxx" grecaptcha={grecaptchaMock} />,
-		);
-    instance.reset();
+    const ReCaptchaRef = React.createRef();
+    ReactTestUtils.renderIntoDocument(
+      (<ReCAPTCHA sitekey="xxx" grecaptcha={grecaptchaMock} ref={ReCaptchaRef} />)
+    );
+    ReCaptchaRef.current.reset();
   });
   it("execute, should call grecaptcha.execute with the widget id", (done) => {
     const grecaptchaMock = {
-      render () {
-        return "someWidgetId";
-      },
-
+      render () { return "someWidgetId"; },
       execute (widgetId) {
         assert.isNotNull(widgetId);
         done();
       },
     };
+    // wrapping component example that applies a ref to ReCAPTCHA
+    class WrappingComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this._internalRef = React.createRef();
+      }
+      render() { return (
+        <div>
+          <ReCAPTCHA
+            sitekey="xxx"
+            size="invisible"
+            grecaptcha={grecaptchaMock}
+            ref={this._internalRef} />
+        </div>);
+      }
+    }
     const instance = ReactTestUtils.renderIntoDocument(
-      <ReCAPTCHA sitekey="xxx" size="invisible" grecaptcha={grecaptchaMock} />,
-		);
-    instance.execute();
+      (<WrappingComponent />)
+    );
+    instance._internalRef.current.execute();
   });
   describe("Expired", () => {
     it("should call onChange with null when response is expired");

test/recaptcha-wrapper-spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactTestUtils from "react-dom/test-utils";
-import ReCAPTCHA from "../src/recaptcha-wrapper"; // eslint-disable-line no-unused-vars
+import ReCAPTCHA from "../src/recaptcha-wrapper";
 
 const VALUE = "some value";
 const WIDGET_ID = "someWidgetId";
@@ -21,17 +21,17 @@ describe("ReCAPTCHAWrapper", () => {
   beforeEach(() => {
     window.grecaptcha = grecaptchaMock;
   });
+  afterEach(() => {
+    delete window.grecaptcha;
+  });
   it("should be wrapped properly", () => {
     assert.equal(ReCAPTCHA.displayName, "AsyncScriptLoader(ReCAPTCHA)");
   });
   it("should proxy functions", () => {
-    const instance = ReactTestUtils.renderIntoDocument(
-      <ReCAPTCHA sitekey="xxx" />,
+    const ReCaptchaRef = React.createRef();
+    ReactTestUtils.renderIntoDocument(
+      <ReCAPTCHA sitekey="xxx" ref={ReCaptchaRef} />,
     );
-    assert.ok(instance);
-    assert.equal(instance.getValue(), VALUE);
-  });
-  afterEach(() => {
-    delete window.grecaptcha;
+    assert.equal(ReCaptchaRef.current.getValue(), VALUE);
   });
 });