Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/steamer-academy/react-google-recaptcha
Component wrapper for Google reCAPTCHA 🤖
https://github.com/steamer-academy/react-google-recaptcha
Last synced: 25 days ago
JSON representation
Component wrapper for Google reCAPTCHA 🤖
- Host: GitHub
- URL: https://github.com/steamer-academy/react-google-recaptcha
- Owner: STEAMer-Academy
- License: mit
- Created: 2024-12-07T07:12:54.000Z (29 days ago)
- Default Branch: main
- Last Pushed: 2024-12-07T07:32:29.000Z (29 days ago)
- Last Synced: 2024-12-07T08:21:56.096Z (29 days ago)
- Language: JavaScript
- Size: 1.04 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[reCAPTCHA]: https://developers.google.com/recaptcha/docs/display
[signup]: http://www.google.com/recaptcha/admin
[docs]: https://developers.google.com/recaptcha
[docs_theme]: https://developers.google.com/recaptcha/docs/faq#can-i-customize-the-recaptcha-widget
[js_api]: https://developers.google.com/recaptcha/docs/display#js_api
[rb]: https://github.com/react-bootstrap/react-bootstrap/
[reCAPTCHA secure-token]: https://developers.google.com/recaptcha/docs/secure_token
[reCAPTCHA hl]: https://developers.google.com/recaptcha/docs/language
---
React component for [Google reCAPTCHA v2][reCAPTCHA].
## 🚀 Installation
```bash
npm install --save react-google-recaptcha
```
## 📖 Usage
Start by [signing up for an API key pair][signup]. Use the client key with the `` component as shown:
### Basic Example
```jsx
import ReCAPTCHA from "react-google-recaptcha";
function onChange(value) {
console.log("Captcha value:", value);
}
ReactDOM.render(
,
document.body
);
```
### Component Props
| Name | Type | Description |
|------------------|--------|-----------------------------------------------------------------------------|
| `asyncScriptOnLoad` | func | *Optional.* Callback when the script has loaded. |
| `badge` | enum | *Optional.* Badge position: `bottomright`, `bottomleft`, or `inline`. |
| `hl` | string | *Optional.* Language code (e.g., `en`, `fr`). [Details][reCAPTCHA hl]. |
| `isolated` | bool | *Optional.* Enable isolated mode. Default: `false`. |
| `onChange` | func | Triggered when the user completes the captcha. |
| `onErrored` | func | *Optional.* Callback for error events. |
| `onExpired` | func | *Optional.* Triggered when the challenge expires. |
| `sitekey` | string | *Required.* API client key. |
| `size` | enum | *Optional.* Size of the captcha: `compact`, `normal`, or `invisible`. |
| `stoken` | string | *Optional.* Secure token for enhanced security. |
| `tabindex` | number | *Optional.* Tabindex of the element. Default: `0`. |
| `type` | enum | *Optional.* Challenge type: `image` or `audio`. Default: `image`. |
| `theme` | enum | *Optional.* Widget theme: `light` or `dark`. Default: `light`. [Example][docs_theme].
### Advanced Features
#### Invisible reCAPTCHA
To use an invisible reCAPTCHA, invoke the challenge programmatically using `execute` or `executeAsync`.
```jsx
import ReCAPTCHA from "react-google-recaptcha";
const recaptchaRef = React.createRef();
function handleSubmit() {
recaptchaRef.current.execute();
}
ReactDOM.render(
,
document.body
);
```
#### Asynchronous Execution
```jsx
const recaptchaRef = React.useRef();
const handleSubmit = async () => {
const token = await recaptchaRef.current.executeAsync();
console.log("Received token:", token);
};
return (
);
```
#### CSP Nonce Support
Add a nonce for strict Content Security Policy (CSP) compliance.
```js
window.recaptchaOptions = {
nonce: document.querySelector("meta[name='csp-nonce']").getAttribute("content"),
};
```
---
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.