Skip to content

Commit 7e3a58d

Browse files
committed
update readme with executeAsync
1 parent 5e30a76 commit 7e3a58d

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ The component instance also has some utility functions that can be called. These
6262
- `reset()` forces reset. See the [JavaScript API doc][js_api]
6363
- `execute()` programmatically invoke the challenge
6464
- need to call when using `"invisible"` reCAPTCHA - [example below](#invisible-recaptcha)
65+
- `executeAsync()` programmatically invoke the challenge and return a promise that resolves to the token or errors(if encountered).
66+
- alternative approach to `execute()` in combination with the `onChange()` prop - [example below](#invisible-recaptcha)
6567

6668
Example:
6769
```javascript
@@ -109,6 +111,39 @@ ReactDOM.render(
109111
);
110112
```
111113

114+
Additionally, you can use the `executeAsync` method to use a promise based approach.
115+
116+
```jsx
117+
import ReCAPTCHA from "react-google-recaptcha";
118+
119+
120+
const ReCAPTCHAForm = (props) => {
121+
const recaptchaRef = React.useRef();
122+
123+
const onSubmitWithReCAPTCHA = async () => {
124+
const token = await recaptchaRef.current.executeAsync();
125+
126+
// apply to form data
127+
}
128+
129+
return (
130+
<form onSubmit={onSubmitWithReCAPTCHA}>
131+
<ReCAPTCHA
132+
ref={recaptchaRef}
133+
size="invisible"
134+
sitekey="Your client site key"
135+
/>
136+
</form>
137+
)
138+
139+
}
140+
141+
ReactDOM.render(
142+
<ReCAPTCHAForm />,
143+
document.body
144+
);
145+
```
146+
112147

113148
### Advanced usage
114149

0 commit comments

Comments
 (0)