# solid-turnstile

> 🔐 A very simple Solid library for Cloudflare Turnstile. Inspired by react-turnstile

Latest version **0.0.2** (published 2022-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install solid-turnstile
pnpm add solid-turnstile
yarn add solid-turnstile
bun add solid-turnstile
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-10-19 |
| First published | 2022-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Noah Hsu |
| Maintainers | xhofe |
| Keywords | solidjs, turnstile, cf-turnstile, validation |

## Links

- npm: https://www.npmjs.com/package/solid-turnstile
- Repository: https://github.com/Xhofe/solid-turnstile
- Homepage: https://github.com/Xhofe/solid-turnstile#readme
- Issues: https://github.com/Xhofe/solid-turnstile/issues
- npm.io page: https://npm.io/package/solid-turnstile

## Dependencies (1)

- [solid-js](https://npm.io/package/solid-js.md) ^1.4.8

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2022-10-19
- 0.0.1 — 2022-10-19

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?project=solid-turnstile" alt="solid-turnstile">
</p>

# solid-turnstile

🔐 A very simple Solid library for [Cloudflare Turnstile](https://challenges.cloudflare.com). Inspired by [react-turnstile](https://www.npmjs.com/package/react-turnstile)

[![release](https://github.com/Xhofe/solid-turnstile/actions/workflows/release.yml/badge.svg)](https://github.com/Xhofe/solid-turnstile/actions/workflows/release.yml)
[![npm](https://img.shields.io/npm/dm/solid-turnstile.svg)](https://www.npmjs.com/package/solid-turnstile)
[![npm](https://img.shields.io/npm/v/solid-turnstile.svg)](https://www.npmjs.com/package/solid-turnstile)
[![license](https://img.shields.io/github/license/Xhofe/solid-turnstile.svg)](https://github.com/Xhofe/solid-turnstile/blob/main/LICENSE)
[![sponsor](https://img.shields.io/badge/%24-sponsor-F87171.svg)](https://sp.nn.ci/)

## Installation

```bash
pnpm add solid-turnstile
```

## Demo

<https://xhofe.github.io/solid-turnstile/>

## Usage

```tsx
import Turnstile from "react-turnstile";

function TurnstileWidget() {
  return (
    <Turnstile
      sitekey="1x00000000000000000000AA"
      onVerify={(token) => alert(token)}
    />
  );
}
```

## Documentation

Turnstile takes the following arguments:

| name              | type    | description                                   |
| ----------------- | ------- | --------------------------------------------- |
| sitekey           | string  | sitekey of your website (REQUIRED)            |
| action            | string  | -                                             |
| cData             | string  | -                                             |
| theme             | string  | one of "light", "dark", "auto"                |
| tabIndex          | number  | -                                             |
| responseField     | boolean | controls generation of `<input />` element \* |
| responseFieldName | string  | changes the name of `<input />` element \*    |

Add others props to `<div />` element.

And the following callbacks:

| name     | arguments | description                                |
| -------- | --------- | ------------------------------------------ |
| onVerify | token     | called when challenge is passed (REQUIRED) |
| onLoad   | -         | called when the widget is loaded           |
| onError  | error     | called when an error occurs                |
| onExpire | -         | called when the challenge expires \*\*     |

\* responseField and responseFieldName are experimental and not yet documented.

\*\* `onExpire` is called when the Turnstile challenge expires without creating a token.

For more details on what each argument does, see the [Cloudflare Documentation](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations).

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