You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+48-13
Original file line number
Diff line number
Diff line change
@@ -35,12 +35,12 @@ function onChange(value) {
35
35
}
36
36
37
37
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
44
44
);
45
45
```
46
46
@@ -57,6 +57,8 @@ Other properties can be used to customised the rendering.
57
57
| tabindex | number | *optional* The tabindex on the element *(__default:__ 0)*
58
58
| 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. |
59
59
| 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
+
60
62
61
63
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.
62
64
@@ -73,6 +75,39 @@ The component also has some utility functions that can be called.
73
75
-`getValue()` returns the value of the captcha field
74
76
-`reset()` forces reset. See the [JavaScript API doc][js_api]
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
+
functiononChange(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
+
76
111
### Advanced usage
77
112
78
113
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.
0 commit comments