File tree Expand file tree Collapse file tree 1 file changed +35
-0
lines changed
Expand file tree Collapse file tree 1 file changed +35
-0
lines changed Original file line number Diff line number Diff 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
6668Example:
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
You can’t perform that action at this time.
0 commit comments