Emojtcha React

CAPTCHA made with Emoji you loved

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contributing
5. License
6. Contact
7. Acknowledgements

About The Project

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.

1. Easy for developers to adopt
2. Easy for users to use
3. Hard for bot to automate (or it will defeat the purpose of using CAPTCHA)

Built With

• React
• Emoji

Getting Started

Prerequisites

• npm

  npm install npm@latest -g

• yarn [optional]

  npm install yarn@latest -g

Installation

• Using npm

  npm install emojtcha-react

• Using yarn

  yarn add emojtcha-react

Usage

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)

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

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.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Pakanon Pantisawat - pakanon.pantisawat@gmail.com

Project Link: https://github.com/pknn/emojtcha-react

Acknowledgements

• styled-components
• Rollup.js
• Babel