React-thelastiq-recaptcha NPM

React-thelastiq-recaptcha

A simple and framework to generate and verify the last IQ test Recaptcha data. This package currently supports TheLastIqTest Recaptcha V1.

Installation

npm install react-thelastiq-recaptcha

yarn install react-thelastiq-recaptcha

Usage

import { TheLastIQReCaptcha } from 'react-thelastiq-recaptcha';

Props

The TheLastIQReCaptcha component accepts the following props:

questionType: string (optional): Specifies the type of question to be displayed. Available options are CHARACTERS, NUMBERS, RANDOM, or COMPLEX. If not provided, the default question type is CHARACTERS..
wordLength number (optional): Specifies the length of the character word that users need to answer. For example, if set to 3, users will be asked to provide a 3-character word. The default value is 3.
reCaptchaKey secret (required): A string representing the API key to use for the request.
refreshonVerifyReCaptcha (optional): Specifies whether to refresh the ReCaptcha widget after a successful verification. Default is false.
refreshReCaptcha (optional): Specifies whether to refresh the ReCaptcha widget on every render. Default is false.
onVerifyCaptcha (required): A callback function that will be called when the user completes the ReCaptcha challenge. It receives the verification result as a parameter.

Examples

Here is an example usage of the TheLastIQReCaptcha component:.
Get your ReCaptcha API Key here TheLastIqTest Recaptcha API KEY

<TheLastIQReCaptcha
    reCaptchaKey={'your-thelastiq-key'}
    onVerifyCaptcha={(result) => {
        // Handle the captcha verification result
        console.log('Result: ', result);
    }}
/>

Example Response

An example response from the TheLastIQReCaptcha after a successful verification:

{
  "status": 200,
  "result": true
}

Notes

Make sure to replace 'your-thelastiq-key' with your actual TheLastIQ ReCaptcha API key.
The onVerifyCaptcha callback function should handle the verification result according to your application's requirements.
The package provides a default question type of CHARACTERS and a default word length of 3 if not explicitly specified.
Please refer to the documentation of TheLastIQ ReCaptcha for more information (https://thelastiqtest.com/api-reference)

Error Handling

The TheLastIQReCaptcha component may encounter errors during initialization or verification. You can handle these errors by wrapping the component in a try-catch block or utilizing the onError prop.

try {
    <TheLastIQReCaptcha
        reCaptchaKey={'your-thelastiq-key'}
        onVerifyCaptcha={(result) => {
            // Handle the captcha verification result
            console.log('Result: ', result);
        }}
        onError={(error) => {
            // Handle the error
            console.error('Error: ', error);
        }}
    />;
} catch (error) {
    // Handle the result error
    console.error('Error: ', error);
}

The onError prop allows you to specify a callback function that will be called when an error occurs. It receives the error object as a parameter.

Dependencies

The thelast-iq-test package has one dependency: axios. This package is used to make HTTP requests to the ReCaptcha API.

Contribution

If you would like to contribute to the thelast-iq-test package, you can do so by submitting a pull request on GitHub. The package repository can be found at https://github.com/suleigolden/react-thelastiq-recaptcha

Credits

The thelast-iq-test package was created by TheLastCodeBender and is maintained by TheLastIQGTest.

The package was inspired by the ReCaptcha API provided by Google, which is used by millions of websites to protect against spam and abuse.

We would like to thank the developers of the following open source packages, which were used in the creation of this package:

axios: A promise-based HTTP client for the browser and Node.js.
fetch: A browser API for making HTTP requests.
Jest: A JavaScript testing framework used for unit testing.

We also want to thank the many contributors who have helped improve the package through bug reports, feature requests, and code contributions. Your contributions are greatly appreciated!

If you have any questions or feedback about the package, please don't hesitate to contact us. We would be happy to hear from you.