KonCaptcha - Sliding Puzzle CAPTCHA

Lightweight sliding puzzle CAPTCHA to protect websites from bots.

🖼️ Demo

🚀 Features

• Lightweight & Performant
• Accessible and user-friendly
• Framework Agnostic
• Simple to Use
• Fully Customizable
• Zero Runtime Dependencies

📦 Installation

npm install @emravoan/koncaptcha
# or
pnpm add @emravoan/koncaptcha
# or
yarn add @emravoan/koncaptcha

💡 Example

import konCaptcha from '@emravoan/koncaptcha';

const el = document.getElementById('captcha');
const kci = konCaptcha(el);

kci.onAttempt(result => {
  console.log(`Captcha verified: ${result.verified}`);
});

📖 Usage

HTML

<div id="captcha"></div>
<button id="refresh">Refresh</button>

JavaScript (ES Modules)

import konCaptcha from '@emravoan/koncaptcha';

const el = document.getElementById('captcha');
const kci = konCaptcha(el);

kci.onAttempt(result => {
  console.log(`Captcha verified: ${result.verified}`);
});

// Optional reset via button
// document.getElementById('refresh').addEventListener('click', () => {
//   kci.reset();
// });

UMD (Browser)

<script src="https://cdn.jsdelivr.net/npm/@emravoan/koncaptcha/dist/koncaptcha.umd.js"></script>
<script>
  const el = document.getElementById('captcha');
  const kci = window.konCaptcha(el);

  kci.onAttempt(result => {
    console.log(`Captcha verified: ${result.verified}`);
  });

  // Optional reset via button
  // document.getElementById('refresh').addEventListener('click', () => {
  //   kci.reset();
  // });
</script>

📃 API

konCaptcha(element: HTMLElement, options?: IKonCaptchaOption): IKonCaptchaInstance

Options

interface IKonCaptchaOption {
  width?: number; // Optional. Width of the CAPTCHA container in pixels.
  height?: number; // Optional. Height of the CAPTCHA container in pixels.
  imgSrc?: string; // Optional. URL of the image to use for the CAPTCHA puzzle.
  deviation?: number; // Optional. Allowed deviation for verification (in pixels).
  wrapperClass?: string; // Optional. CSS class to apply to the main CAPTCHA wrapper element.
}

Instance

interface IKonCaptchaInstance {
  reset: () => void;
  onAttempt: (cb: (result: IKonCaptchaReturn) => void) => void;
}

interface IKonCaptchaReturn {
  verified: boolean;
}

🛠️ Development

git clone https://github.com/emravoan/koncaptcha.git
cd koncaptcha
pnpm install
pnpm build

📄 License

MIT

❤️ Contributing

Issues and PRs welcome!

📞 Contact

Please use GitHub Issues for questions or suggestions.