Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/douglasjunior/react-recaptcha-that-works
⚛ A reCAPTCHA bridge for React that works.
https://github.com/douglasjunior/react-recaptcha-that-works
hacktoberfest kiss react recaptcha
Last synced: 4 days ago
JSON representation
⚛ A reCAPTCHA bridge for React that works.
- Host: GitHub
- URL: https://github.com/douglasjunior/react-recaptcha-that-works
- Owner: douglasjunior
- License: mit
- Created: 2018-08-28T17:28:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T15:13:01.000Z (over 1 year ago)
- Last Synced: 2024-10-02T07:36:53.308Z (4 months ago)
- Topics: hacktoberfest, kiss, react, recaptcha
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-recaptcha-that-works
- Size: 111 KB
- Stars: 16
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-cn - react-recaptcha-that-works - A reCAPTCHA bridge for React that works (Uncategorized / Uncategorized)
- awesome-react - react-recaptcha-that-works - A reCAPTCHA bridge for React that works
- awesome-learning-resources - react-recaptcha-that-works - A reCAPTCHA bridge for React that works (Uncategorized / Uncategorized)
- awesome-react - react-recaptcha-that-works - A reCAPTCHA bridge for React that works. ` 📝 a year ago` (React [🔝](#readme))
README
# reCAPTCHA for React
[](https://github.com/douglasjunior/react-recaptcha-that-works/blob/master/LICENSE)
[](https://www.npmjs.com/package/react-recaptcha-that-works)
[](#install)
A reCAPTCHA library for React that works.
_Looking for [React Native version](https://github.com/douglasjunior/react-native-recaptcha-that-works)?_
## Install
### Install the module
```bash
yarn add react-recaptcha-that-works
```
Or
```bash
npm i -S react-recaptcha-that-works
```
### Import the reCAPTCHA script
```html
...
```
## Usage
### I'm not a robot
```jsx
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 (
Send
)
}
}
```
### Invisible
```jsx
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 (
Send
)
}
}
```
### TypeScript
```tsx
import React, { useRef } from 'react';
import Recaptcha, { RecaptchaRef } from "react-recaptcha-that-works";
// ...
export const Component: React.FC = () => {
const recaptcha = useRef(null);
const send = () => {
console.log('send!');
recaptcha.current?.execute();
};
const onVerify = (token: string) => {
console.log('success!', token);
};
const onExpire = () => {
console.warn('expired!');
}
return (
Send
);
};
```
For more details, see the [Sample Project](https://github.com/douglasjunior/react-recaptcha-that-works/blob/master/src/App.tsx).
## 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
- [I'm not a robot](https://developers.google.com/recaptcha/docs/display)
- [Invisible](https://developers.google.com/recaptcha/docs/invisible)
## Contribute
New features, bug fixes and improvements are welcome! For questions and suggestions, use the [issues](https://github.com/douglasjunior/react-recaptcha-that-works/issues).
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=E32BUP77SVBA2)
## License
```
The MIT License (MIT)
Copyright (c) 2018 Douglas Nassif Roma Junior
```
See the full [license file](https://github.com/douglasjunior/react-recaptcha-that-works/blob/master/LICENSE).