https://github.com/cometkim/gatsby-plugin-turnstile
A Gatsby plugin to integrate Cloudflare turnstile client-side
https://github.com/cometkim/gatsby-plugin-turnstile
Last synced: 5 months ago
JSON representation
A Gatsby plugin to integrate Cloudflare turnstile client-side
- Host: GitHub
- URL: https://github.com/cometkim/gatsby-plugin-turnstile
- Owner: cometkim
- License: mit
- Created: 2022-11-19T07:37:47.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2026-01-19T16:47:50.000Z (5 months ago)
- Last Synced: 2026-01-19T22:51:49.477Z (5 months ago)
- Language: TypeScript
- Size: 2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-plugin-turnstile
[](https://www.npmjs.com/package/gatsby-plugin-turnstile)
[](#LICENSE)
A Gatsby plugin to easily integrate [Cloudflare Turnstile](https://developers.cloudflare.com/turnstile/) client-side.
## Installation
```bash
yarn add gatsby-plugin-turnstile
```
and add it to your `gatsby-config.js` with your Turnstile site key.
```js
{
plugins: [
{
resolve: 'gatsby-plugin-turnstile',
options: {
siteKey: `${YOUR_SITE_KEY}`,
},
},
]
}
```
## Retrieve Site Key
You can use site key you set to gatsby-config. It's provided via static query under the hood.
```js
import { useTurnstileSiteKey } from 'gatsby-plugin-turnstile/src';
const mySiteKey = useTurnstileSiteKey();
```
Use this key to protect your form.
## Use Turnstile API
This plugin provide loader and type definitions for [`window.turnstile` API](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#explicitly-render-the-turnstile-widget).
You can await to `window.turnstile` ready state. For example,
```js
await Promise.race(
window.turnstileReady, // Promise object set by the plugin
new Promise(res => setTimeout(res, 1000)),
);
```
## Use Component API
### ``
Turnstile implicit form injection is not availiable for Gatsby project beacuse of SSR hydration mismatch.
So this plugin handle effect and client-side rendering for
```js
import { TurnstileImplicitFormInput } from 'gatsby-plugin-turnstile/src';
```
## LICENSE
MIT