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
All you need to do is [sign up for an API key pair][signup]. You will need the client key.
15
+
All you need to do is [sign up for an API key pair][signup]. You will need the client key then you can use `<ReCAPTCHA />`.
16
16
17
-
You can then use the reCAPTCHA. The default require imports a wrapped component that loads the reCAPTCHA script asynchronously.
17
+
The default usage imports a wrapped component that loads the google recaptcha script asynchronously then instantiates a `reCAPTCHA` the user can then interact with.
18
18
19
+
Here is a simple working [example on codesandbox.io](https://codesandbox.io/s/1y4zzjq37l).
20
+
21
+
Code Example:
19
22
```jsx
20
-
var React =require("react").default;
21
-
var render =require("react-dom").render
22
-
var ReCAPTCHA =require("react-google-recaptcha");
23
+
importReCAPTCHAfrom"react-google-recaptcha";
23
24
24
25
functiononChange(value) {
25
26
console.log("Captcha value:", value);
26
27
}
27
28
28
-
render(
29
+
ReactDOM.render(
29
30
<ReCAPTCHA
30
-
ref="recaptcha"
31
31
sitekey="Your client site key"
32
32
onChange={onChange}
33
33
/>,
34
34
document.body
35
35
);
36
36
```
37
37
38
-
### Rendering Props
38
+
### Component Props
39
39
40
-
Other properties can be used to customise the rendering.
40
+
Properties used to customise the rendering:
41
41
42
42
| Name | Type | Description |
43
43
|:---- | ---- | ------ |
44
44
| sitekey | string | The API client key |
45
45
| onChange | func | The function to be called when the user successfully completes the captcha |
46
-
| theme | enum | *optional*`light` or `dark` The theme of the widget *(__defaults:__ light)*. See [example][docs_theme]
47
-
| type | enum | *optional*`image` or `audio` The type of initial captcha *(__defaults:__ image)*
48
-
| tabindex | number | *optional* The tabindex on the element *(__default:__0)*
46
+
| theme | enum | *optional*`light` or `dark` The theme of the widget *(__defaults:__`light`)*. See [example][docs_theme]
47
+
| type | enum | *optional*`image` or `audio` The type of initial captcha *(__defaults:__`image`)*
48
+
| tabindex | number | *optional* The tabindex on the element *(__default:__`0`)*
49
49
| 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. |
50
+
| onErrored | func |*optional* callback when the challenge errored, most likely due to network issues. |
50
51
| stoken | string |*optional* set the stoken parameter, which allows the captcha to be used from different domains, see [reCAPTCHA secure-token]|
51
52
| size | enum |*optional*`compact`, `normal` or `invisible`. This allows you to change the size or do an invisible captcha |
52
53
| badge | enum |*optional*`bottomright`, `bottomleft` or `inline`. Positions reCAPTCHA badge. *Only for invisible reCAPTCHA*|
53
54
55
+
### Component Instance API
54
56
55
-
__lang__: In order to translate the reCaptcha widget, you should create a global variable configuring the desired language. If you don't provide it, reCaptcha will pick up the user's interface language.
56
-
57
-
__useRecaptchaNet__: If google.com is blocked, you can set useRecaptchaNet to `true` so that the component uses recaptcha.net instead.
58
-
59
-
__removeOnMount__: If you plan to change the lang dynamically, removeOnMount should probably be true. This will allow you to unmount the reCAPTCHA component and remount it with a new language.
60
-
61
-
```js
62
-
window.recaptchaOptions= {
63
-
lang:'fr',
64
-
useRecaptchaNet:true,
65
-
removeOnMount:false,
66
-
};
67
-
```
68
-
69
-
## Component API
70
-
71
-
The component also has some utility functions that can be called.
57
+
The component instance also has some utility functions that can be called. These can be accessed via `ref`.
72
58
73
59
-`getValue()` returns the value of the captcha field
74
60
-`getWidgetId()` returns the recaptcha widget Id
75
61
-`reset()` forces reset. See the [JavaScript API doc][js_api]
76
62
-`execute()` programmatically invoke the challenge
77
63
- need to call when using `"invisible"` reCAPTCHA - [example below](#invisible-recaptcha)
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.
90
+
See the [reCAPTCHA documentation](https://developers.google.com/recaptcha/docs/invisible) to see how to configure it.
84
91
85
92
With the invisible option, you need to handle things a bit differently. You will need to call the `execute` method yourself.
86
93
87
94
```jsx
88
-
var React =require("react").default;
89
-
var render =require("react-dom").render
90
-
var ReCAPTCHA =require("react-google-recaptcha");
95
+
importReCAPTCHAfrom"react-google-recaptcha";
91
96
92
-
functiononChange(value) {
93
-
console.log("Captcha value:", value);
94
-
}
95
-
96
-
let captcha;
97
+
constrecaptchaRef=React.createRef();
97
98
98
-
render(
99
+
ReactDOM.render(
99
100
<form onSubmit={() => { captcha.execute(); }}>
100
101
<ReCAPTCHA
101
-
ref={(el) => { captcha = el; }}
102
+
ref={recaptchaRef}
102
103
size="invisible"
103
104
sitekey="Your client site key"
104
-
onChange={onChange}
105
105
/>
106
106
</form>,
107
107
document.body
@@ -111,43 +111,48 @@ render(
111
111
112
112
### Advanced usage
113
113
114
+
#### Global properties used by reCaptcha
115
+
116
+
__lang__: By default google reCaptcha infers the user's interface language. In order to overwrite the language and update the translation for the reCaptcha widget, you can create a global variable configuring the desired language via `lang`.
117
+
118
+
__useRecaptchaNet__: If google.com is blocked, you can set `useRecaptchaNet` to `true` so that the component uses recaptcha.net instead.
119
+
120
+
__removeOnUnmount__: If you plan to change the lang dynamically, `removeOnUnmount` should probably be `true`. This unloads the google recaptcha script on `componetWillUnmount` to allow for a new google recaptcha script to load next time the reCAPTCHA component is used to facilitate a new language if needed.
121
+
122
+
Example global properties:
123
+
```js
124
+
window.recaptchaOptions= {
125
+
lang:'fr',
126
+
useRecaptchaNet:true,
127
+
removeOnUnmount:false,
128
+
};
129
+
```
130
+
131
+
#### ReCaptcha loading google recaptcha script manually
132
+
114
133
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.
115
134
116
135
```jsx
117
-
var React =require("react").default;
118
-
var render =require("react-dom").render
119
-
var ReCAPTCHA =require("react-google-recaptcha/lib/recaptcha");
var grecaptchaObject = grecaptcha // You must provide access to the google grecaptcha object.
122
-
123
-
functiononChange(value) {
124
-
console.log("Captcha value:", value);
125
-
}
138
+
constgrecaptchaObject=window.grecaptcha// You must provide access to the google grecaptcha object.
126
139
127
140
render(
128
141
<ReCAPTCHA
129
-
ref="recaptcha"
142
+
ref={(r) =>this.recaptcha= r}
130
143
sitekey="Your client site key"
131
-
onChange={onChange}
132
144
grecaptcha={grecaptchaObject}
133
145
/>,
134
146
document.body
135
147
);
136
148
```
137
149
138
-
## Notes
150
+
## Notes on Requirements
151
+
At least `[email protected]` is required due to `forwardRef` usage in the dependency [react-async-script](https://github.com/dozoisch/react-async-script).
0 commit comments