Skip to content

refactor: simplify Turnstile component and align with official API #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 8, 2025

Conversation

nullcoder
Copy link
Owner

Summary

  • Simplified the Turnstile component by removing unnecessary complexity
  • Aligned with the official Cloudflare Turnstile API documentation
  • Improved consistency with other UI components in the codebase

Changes

  • Removed complexity: Eliminated memoization, state management, and Next.js Script component in favor of direct DOM script injection
  • Updated prop names: Changed onVerify to onSuccess for better consistency
  • Fixed API alignment:
    • Removed invalid "invisible" size option
    • Added proper appearance attribute with values: "always", "execute", "interaction-only"
    • Added execution and language attributes per official docs
  • Invisible mode: Now using appearance="interaction-only" for invisible-like behavior
  • Export pattern: Changed to named export only, matching other UI components

Test plan

  • Component renders without errors
  • Script deduplication works (only one script loaded)
  • Callbacks fire correctly (onSuccess, onError, onExpire)
  • Widget cleanup on unmount
  • All tests pass
  • Integration with create page works properly

🤖 Generated with Claude Code

- Remove unnecessary complexity (memoization, state management, Next.js Script)
- Use direct DOM script injection with deduplication
- Update prop names: onVerify → onSuccess for consistency
- Add correct Cloudflare Turnstile attributes per official docs:
  - Remove invalid "invisible" size option
  - Add appearance attribute ("always", "execute", "interaction-only")
  - Add execution and language attributes
- Use appearance="interaction-only" for invisible-like behavior
- Follow consistent export pattern with other UI components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@nullcoder nullcoder merged commit 2035532 into main Jun 8, 2025
1 check was pending
@nullcoder nullcoder deleted the refactor/simplify-turnstile-component branch June 8, 2025 17:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant