forked from dozoisch/react-google-recaptcha
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[added] doc for react 0.14 + old 0.13
- also added the version for google ReCaptcha (v2) closes dozoisch#4
- Loading branch information
Showing
1 changed file
with
26 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,14 +5,20 @@ | |
[![Dependencies][deps.img]][deps.url] | ||
[![Dev Dependencies][devdeps.img]][devdeps.url] | ||
|
||
Component wrapper for [Google reCAPTCHA][reCAPTCHA] | ||
Component wrapper for [Google reCAPTCHA v2][reCAPTCHA] | ||
|
||
## Installation | ||
|
||
```shell | ||
npm install --save react-google-recaptcha | ||
``` | ||
|
||
### React 0.13 | ||
With 0.13, install version 0.4.0 | ||
```shell | ||
npm install --save [email protected] | ||
``` | ||
|
||
## Usage | ||
|
||
All you need to do is [sign up for an API key pair][signup]. You will need the client key. | ||
|
@@ -21,18 +27,21 @@ You can then use the reCAPTCHA. The default require, imports a wrapped component | |
|
||
```jsx | ||
var React = require("react"); | ||
var render = require("react-dom").render | ||
var ReCAPTCHA = require("react-google-recaptcha"); | ||
|
||
function onChange(value) { | ||
console.log("Captcha value:", value); | ||
} | ||
|
||
React.render( | ||
<ReCAPTCHA | ||
ref="recaptcha" | ||
sitekey="Your client site key" | ||
onChange={onChange} | ||
/>, document.body); | ||
render( | ||
<ReCAPTCHA | ||
ref="recaptcha" | ||
sitekey="Your client site key" | ||
onChange={onChange} | ||
/>, | ||
document.body | ||
); | ||
``` | ||
|
||
### Rendering Props | ||
|
@@ -61,6 +70,7 @@ You can also use the barebone components doing the following. Using that compone | |
|
||
```jsx | ||
var React = require("react"); | ||
var render = require("react-dom").render | ||
var ReCAPTCHA = require("react-google-recaptcha/lib/recaptcha"); | ||
|
||
var grecaptchaObject = grecaptcha // You must provide access to the google grecaptcha object. | ||
|
@@ -69,24 +79,17 @@ function onChange(value) { | |
console.log("Captcha value:", value); | ||
} | ||
|
||
React.render( | ||
<ReCAPTCHA | ||
ref="recaptcha" | ||
sitekey="Your client site key" | ||
onChange={onChange} | ||
grecaptcha={grecaptchaObject} | ||
/>, document.body); | ||
render( | ||
<ReCAPTCHA | ||
ref="recaptcha" | ||
sitekey="Your client site key" | ||
onChange={onChange} | ||
grecaptcha={grecaptchaObject} | ||
/>, | ||
document.body | ||
); | ||
``` | ||
|
||
|
||
|
||
## To Come Soon | ||
- tests | ||
- examples | ||
- code coverage | ||
|
||
*The build is highly inspired by [react-bootstrap][rb]* | ||
|
||
[travis.img]: https://travis-ci.org/dozoisch/react-google-recaptcha.svg?branch=master | ||
[travis.url]: https://travis-ci.org/dozoisch/react-google-recaptcha | ||
[npm.img]: https://badge.fury.io/js/react-google-recaptcha.svg | ||
|