bump 0.0.1 - added base component

- added base component
- added base documentation
- added coming up section

Author: dozoisch

README.md

@@ -1,2 +1,71 @@
 # react-google-recaptcha
-Component wrapper for Google reCAPTCHA
+Component wrapper for [Google reCAPTCHA][reCAPTCHA]
+
+## Installation
+
+```shell
+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.
+
+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
+
+```jsx
+var React = require("react");
+var ReCATPCHA = require("react-google-recaptcha");
+
+function onChange(value) {
+  console.log("Captcha value:", value);
+}
+
+React.render(
+<ReCATPCHA
+  sitekey="Your sitekey"
+  onChange={onChange}
+  onloadCallbackName="onloadcallback"
+/>, document.body);
+```
+
+###Rendering Props
+
+Other properties can be used to customised the rendering.
+
+| Name | Type | Description |
+|:---- | ---- | ------ |
+| 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
+
+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]
+
+## To Come Soon
+- tests
+- examples
+- code coverage
+- eslint
+
+[reCAPTCHA]: https://www.google.com/recaptcha
+[signup]: http://www.google.com/recaptcha/admin
+[docs]: https://developers.google.com/recaptcha
+[js_api]: https://developers.google.com/recaptcha/docs/display#js_api

lib/recaptcha.jsx

@@ -0,0 +1,90 @@
+"use strict";
+var React = require("react");
+var PropTypes = React.PropTypes;
+
+var 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"]),
+    tabindex: PropTypes.number,
+    onLoad: PropTypes.func,
+    onExpired: PropTypes.func,
+  },
+
+  getDefaultState: function () {
+    return {};
+  },
+
+  getDefaultProps: function () {
+    return {
+      theme: "light",
+      type: "image",
+      tabindex: 0,
+      elementId: "react-reCAPTCHA",
+    };
+  },
+
+  getValue: function () {
+    if (typeof grecaptcha !== "undefined" && this.state.widgetId) {
+      return grecaptcha.getResponse(this.state.widgetId);
+    }
+    return null;
+  },
+
+  reset: function () {
+    if (typeof grecaptcha !== "undefined" && this.state.widgetId) {
+      grecaptcha.reset(this.props.widgetId);
+    }
+  },
+
+  handleExpired: function () {
+    if (this.props.onExpired) {
+      this.props.onExpired();
+    } else if (this.props.onChange) {
+      this.props.onChange(null);
+    }
+  },
+
+  explicitRender: function () {
+    var id = grecaptcha.render(this.refs.captcha.getDOMNode(), {
+      sitekey: this.props.sitekey,
+      callback: this.props.onChange,
+      theme: this.props.theme,
+      type: this.props.type,
+      tabindex: this.props.tabindex,
+      "expired-callback": this.handleExpired,
+    });
+    this.setState({
+      widgetId: id,
+    });
+  },
+
+
+  handleLoad: function () {
+    this.explicitRender();
+    if (this.props.onLoad) {
+      this.props.onLoad();
+    }
+  },
+
+  componentDidMount: function () {
+    // If script is not loaded, set the callback on window.
+    if (typeof grecaptcha === "undefined") {
+      window[this.props.onloadCallbackName] = this.handleLoad;
+    } else {
+      this.handleLoad();
+    }
+  },
+
+  render: function () {
+    return (
+      <div ref="captcha" id={this.props.elementId} />
+    );
+  }
+});
+
+module.exports = ReCAPTCHA;

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-google-recaptcha",
+  "version": "0.0.1",
+  "description": "React Component Wrapper for Google reCAPTCHA",
+  "main": "lib/recaptcha.jsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dozoisch/react-google-recaptcha.git"
+  },
+  "keywords": [
+    "react",
+    "captcha",
+    "recaptcha",
+    "google-recaptcha"
+  ],
+  "author": "Hugo Dozois <hugo@dozoisch.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dozoisch/react-google-recaptcha/issues"
+  },
+  "homepage": "https://github.com/dozoisch/react-google-recaptcha",
+  "peerDependencies": {
+    "react": ">=0.13"
+  },
+  "devDependencies": {}
+}