# usecaptcha

> React hook for Google reCAPTCHA v2.

Latest version **1.0.4** (published 2020-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install usecaptcha
pnpm add usecaptcha
yarn add usecaptcha
bun add usecaptcha
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-11-07 |
| First published | 2019-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Serhii Sakal |
| Maintainers | sakals |
| Keywords | captcha, google-recaptcha, react, react-hook, recaptcha |

## Links

- npm: https://www.npmjs.com/package/usecaptcha
- Repository: https://github.com/sakalx/useCaptcha
- Homepage: https://sakalx.github.io/useCaptcha
- Issues: https://github.com/sakalx/useCaptcha/issues
- npm.io page: https://npm.io/package/usecaptcha

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-11-07
- 1.0.3 — 2019-10-02
- 1.0.2 — 2019-10-02
- 1.0.1 — 2019-09-29
- 1.0.0 — 2019-09-29

## README

# React hook for Google reCAPTCHA v2.

reCAPTCHA protects you against spam and other types of automated abuse. Here, we explain how to add reCAPTCHA to your React APP.
 ________________________________________________________

React hook for [Google reCAPTCHA v2.](https://developers.google.com/recaptcha/intro)

To get `sitekey` you need [Register a new site](https://www.google.com/recaptcha/admin/create)

________________________________________________________
________________________________________________________
### Example [Checkbox reCAPTCHA](https://developers.google.com/recaptcha/docs/display)

```javascript
import React from 'react';
import useCaptcha from 'usecaptcha';

const sitekey = 'YOUR_SITE_KEY'; 

const App = () => {
    const [captchaRef, execute, response] = useCaptcha(sitekey);
  
    return (
      <main>
        <h1>reCAPTCHA</h1>
        <p>Response: {response}</p>
        <button onClick={execute}>EXECUTE CAPTCHA</button>
    
        <aside ref={captchaRef}/>
      </main>
    )
}
```
________________________________________________________
________________________________________________________
### Example [Invisible reCAPTCHA](https://developers.google.com/recaptcha/docs/invisible)

```javascript
import React from 'react';
import useCaptcha from 'usecaptcha';

const sitekey = 'YOUR_SITE_KEY'; 

const App = () => {
    const options = {
      size: 'invisible',
    }; 
    const [captchaRef, execute, response] = useCaptcha(sitekey, options);
    
    return (
      <main>
        <h1>reCAPTCHA</h1>
        <p>Response: {response}</p>
        <button onClick={execute}>EXECUTE CAPTCHA</button>
    
        <aside ref={captchaRef}/>
      </main>
    )
}
```
________________________________________________________
________________________________________________________
### Example with options:

```javascript
import React from 'react';
import useCaptcha from 'usecaptcha';

const sitekey = 'YOUR_SITE_KEY'; 

const App = () => {
    const options = {
      size: 'size',
      theme: 'dark',
      callback: (response) => console.log(response),
    }; 
    const [captchaRef, execute, response] = useCaptcha(sitekey, options);
    
    return (
      <main>
        <h1>reCAPTCHA</h1>
        <p>Response: {response}</p>
        <button onClick={execute}>EXECUTE CAPTCHA</button>
    
        <aside ref={captchaRef}/>
      </main>
    )
}
```
________________________________________________________

 [DEMO](https://sakalx.github.io/useCaptcha/)
________________________________________________________
________________________________________________________
#### options
| Name | Value | Description |
| --- | --- | --- |
| **badge** | [`bottomright`,`bottomleft`,`inline`] | Optional for invisible reCAPTCHA. Reposition the reCAPTCHA badge. 'inline' lets you position it with CSS. |
| **theme** | [`dark`,`light`] | Optional. The color theme of the widget. |
| **size** | [`invisible`,`compact `,`normal`] | Optional. Used to create an invisible widget bound to a div and programmatically executed, or the size of the reCAPTCHA checkbox. |
| **language** | [[`Language Codes`](https://developers.google.com/recaptcha/docs/language)] | Optional. Forces the widget to render in a specific language. Auto-detects the user's language if unspecified. See [language codes](https://developers.google.com/recaptcha/docs/language) |
| **callback** | [`function`] | Optional. The callback function, executed when the user submits a successful response. The response token is passed to your callback. |
| **expiredCallback** | [`function`] | Optional. The callback function, executed when the reCAPTCHA response expires and the user needs to re-verify. |
| **errorCallback** | [`function`] | Optional. The 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. |
| **globally** | [`boolean`] | Optional. [Can I use reCAPTCHA globally?](https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally). If set to `true` will be use `www.recaptcha.net` host. Default to `www.google.com`. |
 
 ________________________________________________________
 ________________________________________________________
#### Server Side Validation
[Verifying response](https://developers.google.com/recaptcha/docs/verify#api_request)
________________________________________________________
________________________________________________________

---
_Source: https://npm.io/package/usecaptcha · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._