gatsby-plugin-turnstile

A Gatsby plugin to easily integrate Cloudflare Turnstile client-side.

Installation

yarn add gatsby-plugin-turnstile

and add it to your gatsby-config.js with your Turnstile site key.

{
  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.

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.

You can await to window.turnstile ready state. For example,

await Promise.race(
  window.turnstileReady, // Promise object set by the plugin
  new Promise(res => setTimeout(res, 1000)),
);

Use Component API

<TurnstileImplicitFormInput>

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

import { TurnstileImplicitFormInput } from 'gatsby-plugin-turnstile/src';

LICENSE

MIT