@myrasec/eu-captcha

This package provides an easy integration of EU Captcha from Myra Security.

The package can be use with and without react.

With react

Proceed as follows:

(1) Install the package.
``
npm i @myrasec/eu-captcha
`

(2) Add the code below in your code:

`
import { EuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha";

// Here use the public site key which can be found in the backend of the customer.
const captchaSitekey = "YOUR-SITEKEY-HERE";
`

(3) Render the widget with the syntax below.

`

`

You can test the integration using any fake site key.
If a site key does not exist, the captcha runs with default parameters and all traffic will be passed.

You can also set additional properties: theme, width

To switch between light/dark theme:

`

`

To define the width of the widget (default is 330). Please specify a number.

`

`

Without react

To use the package without react, you can use the libary as described below.

Proceed as follows:

(1) Install the package.
`
npm i @myrasec/eu-captcha
`

(1) Load the JS components asynchronously as descibe below.

`
import { loadEuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha";

loadEuCaptcha();
`

(2) Add the <div> tag to a form of your website manually where the EU CAPTCHA should appear.

`



`

Querying state

Make sure that EU Captcha is done before submitting a form to a server.

`
import { isEuCaptchaDone } from "@myrasec/eu-captcha";

function onSubmit(e) {
e.preventDefault();

if (!isEuCaptchaDone()) {
// computation has not been completed

return;
}
}
`

Listening to state change

Additionally, in case you want to be informed actively to changes, such as the status of a button, a message can be displayed in the main window with msg.data.type set to 'euCaptchaDone'.

`
function listenForCaptchaDone(msg: MessageEvent) {
if (msg.data.type === 'euCaptchaDone') {
// Changes the status of the form, etc.
}
}

window.addEventListener("message", listenForCaptchaDone, false);
``