Community Plugin

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}`,
      },
    },
  ]
}

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.

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)),
);

MIT