updated documentation and allow invisible recaptcha

README.md

@@ -7,17 +7,17 @@ Easy to use React component to enable Google ReCaptcha for your form
 ## Using the components
 1. install the component to your project
 ```
-$ npm install --save google-recaptcha-react-module
+$ npm install --save google-recaptcha-react-component
 ```
 2. Import the component
 ```
 // es6
-import  ReCaptcha  from  'google-recaptcha-react-module';
+import  ReCaptcha  from  'google-recaptcha-react-component';
 ```
 
 ```
 // es5
-var ReCaptcha =  require('google-recaptcha-react-module');
+var ReCaptcha =  require('google-recaptcha-react-component');
 ```
 3. Use it like any other component!
 ```
@@ -35,6 +35,7 @@ Component Props
 | Prop Name  |Type | Note|
 | ------------- | ------------- | ------------- |
 | token  | **Required**. string  |  token given by Google ReCaptcha|
+|size|*Optional*. String| set value to "invisible" for invisible ReCaptcha|
 | onSuccess  | **Required**. function(token)  | Callback function triggered when ReCaptcha is resolved. *token* is a vlue returned by ReCapthca that you will need to validate.|
 |onRef|*Optional*. object| Required if using the invisible ReCaptcha, otherwise it is not needed
 
@@ -74,6 +75,7 @@ class Parent extends React.Component {
 			<div>
 				<ReCaptcha
 					token="SAMPLE_TOKEN_FROM_RECAPTCHA"
+					size="invisible"
 					onSuccess={this.onSuccess}
 					onRef={ref => (this.child = ref)} />
 				<button onClick={this.onClick}>ReCaptcha.method()</button>

build/index.js

@@ -447,13 +447,16 @@ var ReCaptcha = function (_React$Component) {
     value: function renderReCaptcha(element) {
       var _this2 = this;
 
-      var token = this.props.token;
+      var _props = this.props,
+          token = _props.token,
+          size = _props.size;
 
 
       (0, _loader2.default)(function (grecaptcha) {
         _this2.recaptchaId = grecaptcha.render(element, {
           sitekey: token,
-          callback: CALLBACK_NAME
+          callback: CALLBACK_NAME,
+          size: size
         });
       });
     }

index-test-app.jsx

@@ -4,15 +4,21 @@ import ReCaptcha from './src/index.jsx';
 
 class Parent extends React.Component {
   onClick = () => {
-    this.child.execute();
+      this.child.execute(); // Triggers Invisible ReCaptcha
+  }
+
+  onSuccess = (token) => {
+    console.log(token);
+      // TODO: Validate the token your way and continue process
   }
 
   render() {
     return (
       <div>
       <ReCaptcha
-        token="TEST_ACCOUNT"
-        onSuccess={(token, callback)=>{ callback(); }}
+        token="TEST_TOKEN"
+        size="invisible"
+        onSuccess={this.onSuccess}
         onRef={ref => (this.child = ref)} />
       <button onClick={this.onClick}>Child.method()</button>
       </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "google-recaptcha-react-component",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Enable Google Recaptcha for your React project",
   "main": "build/index.js",
   "scripts": {

src/index.jsx

@@ -34,12 +34,13 @@ class ReCaptcha extends React.Component {
   }
 
   renderReCaptcha (element) {
-    const { token } = this.props;
+    const { token, size } = this.props;
 
     loader((grecaptcha) => {
       this.recaptchaId = grecaptcha.render(element, {
         sitekey: token,
-        callback: CALLBACK_NAME
+        callback: CALLBACK_NAME,
+        size: size
       });
     });
   }
@@ -69,7 +70,7 @@ ReCaptcha.propTypes = {
 };
 
 ReCaptcha.defaultProps = {
-  onRef: () => {} 
+  onRef: () => {}
 };
 
 module.exports = ReCaptcha;