#react-bot-detection

@tsdevstack/react-bot-detection is a React library for client-side bot detection using behavioral analysis and honeypot fields. Zero dependencies beyond React, SSR-safe, fully typed.

npm install @tsdevstack/react-bot-detection

#Quick start

import { BotProtectedForm } from '@tsdevstack/react-bot-detection';

function ContactForm() {
  const handleSubmit = async (formData: FormData, botResult) => {
    await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify({
        email: formData.get('email'),
        botScore: botResult.score,
        isBot: botResult.isBot,
      }),
    });
  };

  return (
    <BotProtectedForm onSubmit={handleSubmit}>
      <input name="email" type="email" placeholder="Email" />
      <textarea name="message" placeholder="Message" />
    </BotProtectedForm>
  );
}

#Exports

#Detection methods

#Behavioral analysis (useBotDetection)

Tracks mouse movements, typing patterns, focus events, and time on form. Scores each signal:

Threshold: Score >= 50 is classified as a bot.

#Honeypot (useHoneypot)

Hidden fields invisible to humans but visible to bots that parse HTML. When filled, adds +100 to score.

#BotProtectedForm props

#Best practices

1. Always validate server-side — client-side detection can be bypassed. Send the botScore to your backend and verify there.
2. Don't reveal detection — silently accept bot submissions but don't process them. This prevents bots from learning your detection methods.
3. Combine with rate limiting — bot detection is one layer. Also use IP-based rate limiting and email verification.
4. Use the debug panel in development: showDebugPanel={process.env.NODE_ENV === 'development'}