Skip to content

Commit 4eda897

Browse files
committed
Added Invisible example to README.md
1 parent 170a642 commit 4eda897

File tree

1 file changed

+48
-13
lines changed

1 file changed

+48
-13
lines changed

README.md

+48-13
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ function onChange(value) {
3535
}
3636

3737
render(
38-
<ReCAPTCHA
39-
ref="recaptcha"
40-
sitekey="Your client site key"
41-
onChange={onChange}
42-
/>,
43-
document.body
38+
<ReCAPTCHA
39+
ref="recaptcha"
40+
sitekey="Your client site key"
41+
onChange={onChange}
42+
/>,
43+
document.body
4444
);
4545
```
4646

@@ -57,6 +57,8 @@ Other properties can be used to customised the rendering.
5757
| tabindex | number | *optional* The tabindex on the element *(__default:__ 0)*
5858
| 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. |
5959
| stoken | string | *optional* set the stoken parameter, which allows the captcha to be used from different domains, see [reCAPTCHA secure-token] |
60+
| size | enum | *optional* `compact`, `normal` or `invisible`. This allows you to change the size or do an invisible captcha |
61+
6062

6163
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.
6264

@@ -73,6 +75,39 @@ The component also has some utility functions that can be called.
7375
- `getValue()` returns the value of the captcha field
7476
- `reset()` forces reset. See the [JavaScript API doc][js_api]
7577

78+
### Invisible reCAPTCHA
79+
80+
[Invisible reCAPTCHA](https://developers.google.com/recaptcha/docs/versions)
81+
82+
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.
83+
84+
With the invisible option, you need to handle things a bit differently. You will need to call the execute method by yourself.
85+
86+
```jsx
87+
var React = require("react");
88+
var render = require("react-dom").render
89+
var ReCAPTCHA = require("react-google-recaptcha");
90+
91+
function onChange(value) {
92+
console.log("Captcha value:", value);
93+
}
94+
95+
let captcha;
96+
97+
render(
98+
<form onSubmit={() => { captcha.execute(); }}>
99+
<ReCAPTCHA
100+
ref={(el) => { captcha = el; }}
101+
size="invisible"
102+
sitekey="Your client site key"
103+
onChange={onChange}
104+
/>
105+
</form>,
106+
document.body
107+
);
108+
```
109+
110+
76111
### Advanced usage
77112

78113
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) {
89124
}
90125

91126
render(
92-
<ReCAPTCHA
93-
ref="recaptcha"
94-
sitekey="Your client site key"
95-
onChange={onChange}
96-
grecaptcha={grecaptchaObject}
97-
/>,
98-
document.body
127+
<ReCAPTCHA
128+
ref="recaptcha"
129+
sitekey="Your client site key"
130+
onChange={onChange}
131+
grecaptcha={grecaptchaObject}
132+
/>,
133+
document.body
99134
);
100135
```
101136

0 commit comments

Comments
 (0)