S

useRecaptcha

[Deprecated] Use recaptchaPlugin instead. Injects the Google reCAPTCHA v3 script.

useRecaptcha

Deprecated. Use recaptchaPlugin() instead. The plugin does everything this hook does plus automatically adds the reCAPTCHA token to submitted values.

A side-effect hook that conditionally loads the Google reCAPTCHA v3 script. It only activates when your form’s submit config includes a reCAPTCHA site key.

Migration

// Before (hook — only injects script, token must be handled manually):
import { useRecaptcha } from '@saastro/forms';
useRecaptcha(config);

// After (plugin — injects script AND adds token to submitted values):
import { recaptchaPlugin, PluginManager } from '@saastro/forms';

const pm = new PluginManager();
pm.register(recaptchaPlugin({ siteKey: 'your-site-key' }));

FormBuilder.create('contact')
  .usePlugins(pm)
  // ... fields and steps
  .build();

The plugin approach is better because:

  • Self-contained — script injection + token generation in one place
  • Automatic — token added to every submission via transformValues
  • Follows plugin patterns — factory function like autosavePlugin() and databowlPlugin()
  • No special config — no need to nest recaptcha.siteKey inside config.submit

Legacy Signature

import { useRecaptcha } from '@saastro/forms';

useRecaptcha(config); // Returns void (side-effect only)

When It Activates

The script is injected only when both conditions are met:

  1. config.submit?.type === 'default'
  2. config.submit.recaptcha?.siteKey is truthy

What It Does

  1. Checks if reCAPTCHA is already loaded (window.grecaptcha or existing script tag)
  2. Creates and appends a <script> tag for reCAPTCHA v3
  3. Removes the script on component unmount