reCAPTCHA for React
A reCAPTCHA library for React that works.
Looking for React Native version?
Install
Install the module
yarn add react-recaptcha-that-worksnpm i -S react-recaptcha-that-worksImport the reCAPTCHA script
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
...
</body>
</html>Usage
I'm not a robot
import React, { Component } from 'react';
import Recaptcha from 'react-recaptcha-that-works';
class App extends Component {
send = () => {
console.log('send!', this.state.token);
}
onVerify = token => {
console.log('success!', token);
this.setState({ token });
}
onExpire = () => {
console.warn('expired!');
}
render() {
return (
<div>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<Recaptcha
siteKey="<your-recaptcha-public-key>"
onVerify={this.onVerify}
onExpire={this.onExpire}
/>
<button onClick={this.send}>Send</button>
</div>
)
}
}Invisible
import React, { Component } from 'react';
import Recaptcha from 'react-recaptcha-that-works';
class App extends Component {
send = () => {
console.log('send!');
this.recaptcha.execute();
}
onVerify = token => {
console.log('success!', token);
}
onExpire = () => {
console.warn('expired!');
}
render() {
return (
<div>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<Recaptcha
ref={ref = this.recaptcha = ref}
siteKey="<your-recaptcha-public-key>"
onVerify={this.onVerify}
onExpire={this.onExpire}
size="invisible"
/>
<button onClick={this.send}>Send</button>
</div>
)
}
}TypeScript
import React, { useRef } from 'react';
import Recaptcha, { RecaptchaRef } from "react-recaptcha-that-works";
// ...
export const Component: React.FC = () => {
const recaptcha = useRef<RecaptchaRef>(null);
const send = () => {
console.log('send!');
recaptcha.current?.execute();
};
const onVerify = (token: string) => {
console.log('success!', token);
};
const onExpire = () => {
console.warn('expired!');
}
return (
<div>
<Recaptcha
ref={recaptcha}
siteKey="<your-recaptcha-public-key>"
onVerify={onVerify}
onExpire={onExpire}
size="invisible"
/>
<button onClick={send}>
Send
</button>
</div>
);
};For more details, see the Sample Project.
Props
|Name|Value|Default|Description| |-|-|-|-| |siteKey|||Your sitekey.| |size|'invisible', 'normal' or 'compact'|'normal'|The size of the widget.|
|theme|'dark' or 'light'|'light'|The color theme of the widget.|
|onLoad|function()||A callback function, executed when the reCAPTCHA is ready to use.|
|onVerify|function(token)||A callback function, executed when the user submits a successful response. The reCAPTCHA response token is passed to your callback.|
|onExpire|function()||A callback function, executed when the reCAPTCHA response expires and the user needs to re-verify.|
|onError|function()||A callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.|
|onClose|function()||(Experimental) A callback function, executed when the challenge window is closed.|React Ref Methods
|Name|Type|Description| |-|-|-| |execute|function|Executes the challenge in "invisible" mode.|
|reset|function|Resets the reCAPTCHA state.|reCAPTCHA v2 docs
Contribute
New features, bug fixes and improvements are welcome! For questions and suggestions, use the issues.
License
The MIT License (MIT)
Copyright (c) 2018 Douglas Nassif Roma JuniorSee the full license file.
