Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-plugin-turnstile

NPM Package License - MIT

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

LICENSE

MIT

© 2024 Gatsby, Inc.