# svelte-recaptcha-enhance

> A lightweight SvelteKit utility to easily add Google reCAPTCHA v3 to your forms with progressive enhancement. This package helps you integrate Google's powerful reCAPTCHA solution into your SvelteKit applications to prevent automated software (bots) from

Latest version **0.0.9** (published 2023-12-17) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install svelte-recaptcha-enhance
pnpm add svelte-recaptcha-enhance
yarn add svelte-recaptcha-enhance
bun add svelte-recaptcha-enhance
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2023-12-17 |
| First published | 2023-07-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 38.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Maintainers | edde746 |

## Links

- npm: https://www.npmjs.com/package/svelte-recaptcha-enhance
- Repository: https://github.com/edde746/svelte-recaptcha-enhance
- Homepage: https://github.com/edde746/svelte-recaptcha-enhance#readme
- Issues: https://github.com/edde746/svelte-recaptcha-enhance/issues
- npm.io page: https://npm.io/package/svelte-recaptcha-enhance

## Recent versions

- 0.0.9 (latest) — 2023-12-17
- 0.0.8 — 2023-12-17
- 0.0.7 — 2023-12-17
- 0.0.6 — 2023-12-17
- 0.0.5 — 2023-09-17
- 0.0.4 — 2023-09-16
- 0.0.3 — 2023-07-06
- 0.0.2 — 2023-07-06
- 0.0.1 — 2023-07-06

## README

# svelte-recaptcha-enhance

A lightweight SvelteKit utility to easily add Google reCAPTCHA v3 to your forms with progressive enhancement. This package helps you integrate Google's powerful reCAPTCHA solution into your SvelteKit applications to prevent automated software (bots) from engaging in abusive activities on your site.

## Installation

Use npm to install the `svelte-recaptcha-enhance` package:

```bash
npm install svelte-recaptcha-enhance
```

## Example

Below is an example of how to use `svelte-recaptcha-enhance` in your SvelteKit application:

```svelte
<script>
  import recaptchaEnhance from 'svelte-recaptcha-enhance';
</script>

<svelte:head>
  <script src="https://www.google.com/recaptcha/api.js?render={import.meta.env.VITE_SITEKEY}">
  </script>
</svelte:head>

<form
  method="post"
  use:recaptchaEnhance={{
    siteKey: import.meta.env.VITE_SITEKEY,
    callback:
      ({ formData }) =>
      ({ result }) => {
        alert(result.data.message);
      }
  }}
>
  <input type="text" name="name" placeholder="Your name" />
  <button>Submit</button>
</form>
```

## Usage

In the above example, `recaptchaEnhance` is a Svelte action you can add to your form to easily integrate reCAPTCHA.

You'll need to get your `siteKey` from Google's reCAPTCHA admin console and include it in your environment variables (`VITE_SITEKEY` in the example).

The `func` function is the same as what would usually be passed to the `enhance` function ([documentation](https://kit.svelte.dev/docs/form-actions#progressive-enhancement))

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