diff --git a/README.md b/README.md index 39bece5..0cf6f9d 100644 --- a/README.md +++ b/README.md @@ -35,12 +35,12 @@ function onChange(value) { } render( - , - document.body + , + document.body ); ``` @@ -57,6 +57,8 @@ Other properties can be used to customised the rendering. | tabindex | number | *optional* The tabindex on the element *(__default:__ 0)* | 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. | | stoken | string | *optional* set the stoken parameter, which allows the captcha to be used from different domains, see [reCAPTCHA secure-token] | +| size | enum | *optional* `compact`, `normal` or `invisible`. This allows you to change the size or do an invisible captcha | + In order to translate the reCaptcha widget you should create a global variable configuring the desire language, if you don't provide it reCaptcha will pick up the user's interface language. @@ -73,6 +75,39 @@ 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] +### Invisible reCAPTCHA + +[Invisible reCAPTCHA](https://developers.google.com/recaptcha/docs/versions) + +Starting with 0.7.0, the component now supports invisible options. See the [reCAPTCHA documentation](https://developers.google.com/recaptcha/docs/invisible) to see how to configure it. + +With the invisible option, you need to handle things a bit differently. You will need to call the execute method by yourself. + +```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); +} + +let captcha; + +render( +
{ captcha.execute(); }}> + { captcha = el; }} + size="invisible" + sitekey="Your client site key" + onChange={onChange} + /> + , + document.body +); +``` + + ### 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. @@ -89,13 +124,13 @@ function onChange(value) { } render( - , - document.body + , + document.body ); ```