Drag Puzzle Captcha

A beautiful, modern drag-and-drop puzzle CAPTCHA component for React applications. This component provides an interactive slider puzzle that users must solve to verify they are human.

✨ Features

- 🎯 Interactive drag-and-drop puzzle verification
- 🎨 Modern, beautiful UI design
- 📱 Responsive and mobile-friendly
- 🔧 Easy to integrate and customize
- 🚀 Lightweight with no external dependencies
- ♿ Accessible design
- 🎭 Smooth animations and transitions
- 🌍 Multi-language support (English & French)
- 📦 Compatible with Vite, Create React App, and Next.js

📦 Installation

bash

npm install drag-puzzle-captcha





🚀 Quick Start



$3

jsx

import React, { useState } from 'react';

import DragPuzzleCaptcha from 'drag-puzzle-captcha';

import 'drag-puzzle-captcha/DragPuzzleCaptcha.css';



function App() {

  const [isVerified, setIsVerified] = useState(false);



  const handleVerification = (success) => {

    setIsVerified(success);

    if (success) {

      console.log('CAPTCHA verified successfully!');

    }

  };



  return (

    

      My Form

      

      {isVerified && ✅ Verification successful!}

    

  );

}



export default App;





$3



For Vite projects, you can import styles in multiple ways:

jsx

// Method 1: Import CSS directly

import 'drag-puzzle-captcha/DragPuzzleCaptcha.css';



// Method 2: Import as style (alias)

import 'drag-puzzle-captcha/style';



// Method 3: Import in your CSS file

/ In your main CSS file /

@import 'drag-puzzle-captcha/DragPuzzleCaptcha.css';

$3

jsx

import React, { useState } from 'react';

import dynamic from 'next/dynamic';

import 'drag-puzzle-captcha/DragPuzzleCaptcha.css';



// Dynamic import to avoid SSR issues

const DragPuzzleCaptcha = dynamic(

  () => import('drag-puzzle-captcha'),

  { ssr: false }

);



export default function MyPage() {

  const [isVerified, setIsVerified] = useState(false);



  return (

    

      Secure Form

      

      {isVerified && ✅ Verified!}

    

  );

}

$3

jsx

import React, { useState } from 'react';

import DragPuzzleCaptcha from 'drag-puzzle-captcha';

import 'drag-puzzle-captcha/DragPuzzleCaptcha.css';



function App() {

  const [showCaptcha, setShowCaptcha] = useState(false);

  const [isVerified, setIsVerified] = useState(false);



  const handleVerification = (success) => {

    setIsVerified(success);

    if (success) {

      setShowCaptcha(false);

    }

  };



  return (

    

      

      

      {showCaptcha && (

                  showModal={true}

          onVerify={handleVerification}

          onCloseModal={() => setShowCaptcha(false)}

        />

      )}

    

  );

}

$3

tsx

import React, { useState, useRef } from 'react';

import DragPuzzleCaptcha, { 

  DragPuzzleCaptchaProps, 

  DragPuzzleCaptchaRef 

} from 'drag-puzzle-captcha';

import 'drag-puzzle-captcha/DragPuzzleCaptcha.css';



const MyComponent: React.FC = () => {

  const [isVerified, setIsVerified] = useState(false);

  const captchaRef = useRef(null);



  const handleVerification = (success: boolean) => {

    setIsVerified(success);

  };



  const resetCaptcha = () => {

    captchaRef.current?.reset();

  };



  return (

    

              ref={captchaRef}

        onVerify={handleVerification}

        language="eng"

      />

      

    

  );

};





📚 API



$3



| Prop | Type | Default | Description |

|------|------|---------|-------------|

|

onVerify | (success: boolean) => void

 | - | Callback function called when verification completes |

|

language | 'eng' \| 'fr' | 'eng'

 | Language for component text |

|

showModal | boolean | false

 | Whether to display the component in a modal |

|

onCloseModal | () => void

 | - | Callback when modal is closed |



$3



| Method | Type | Description |

|--------|------|-------------|

|

reset | () => void

 | Reset the puzzle to initial state |

|

isVerified | () => boolean

 | Check if puzzle is currently verified |



🎨 Styling



The component comes with default styles, but you can customize the appearance:

css

/ Override default styles /

.drag-puzzle-container {

  --primary-color: #your-color;

  --background-color: #your-bg;

}



.drag-puzzle-piece {

  border-radius: 12px; / Custom border radius /

}



.drag-puzzle-track {

  background: your-custom-gradient;

}





🌍 Internationalization



Currently supports:

- English (

'eng'

)

- French (

'fr'

jsx





⚡ Performance Tips



1. Lazy Loading: Use dynamic imports for better bundle splitting

2. CSS Optimization: Import styles only where needed

3. SSR: Use

ssr: false` for Next.js to avoid hydration issues

📄 License

MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

If you encounter any issues or have questions, please open an issue on GitHub.