CAPTCHA made with Emoji you loved
View Demo
·
Report Bug
·
Request Feature
Table of Contents
CAPTCHA is one of the most frustrating experience of surfing the internet and you know it. There must be a time that you're ready to slam your keyboard, throw your mouse, gouge your eyes out, just from the frustration of solving CAPTCHA, and when you know the struggle of using CAPTCHA, as a web developer, you should get rid of it (maybe), and make your web easier and less frustrate to use.
Introducing Emojtcha, the CAPTCHA made easy with Emoji that everyone loves. Just use it, and you (and probably your users) will love it.
Emojtcha was made with 3 principles in mind.
- Easy for developers to adopt
- Easy for users to use
- Hard for bot to automate (or it will defeat the purpose of using CAPTCHA)
- React
- Emoji
-
npm
npm install npm@latest -g
-
yarn [optional]
npm install yarn@latest -g
- Using npm
npm install emojtcha-react
- Using yarn
yarn add emojtcha-react
Using Emojtcha is simple as 3 steps
import React from 'react';
/* Your others imports */
// 1. Importing EmojtCha
import { Emojtcha } from 'emojtcha-react';
const Component = () => {
// 2. Define an event handler
const handleEmojtchaSelected = (isCorrectEmojtcha) => {
if (isCorrectEmojtcha) {
/* Do something */
}
}
return (
<div>
<!-- Your component content -->
...
<!-- 3. Using EmojtCha -->
<EmojtCha onSelect={handleEmojtchaSelected} />
</div>
)
}Or you can directly set state
import React from 'react';
/* Your others imports */
// 1. Importing EmojtCha
import { Emojtcha } from 'emojtcha-react';
const Component = () => {
// 2. Define a state
const [isValidationPassed, setIsValidationPassed] = React.useState(false)
return (
<div>
<!-- Your component content -->
...
<!-- 3. Using EmojtCha -->
<EmojtCha onSelect={setIsValidationPassed} />
</div>
)
}For more examples, please refer to the Documentation (Coming Soon)
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Pakanon Pantisawat - [email protected]
Project Link: https://github.com/pknn/emojtcha-react