JSPM – @artifact-project/recaptcha@1.2.0

Package Exports

@artifact-project/recaptcha
@artifact-project/recaptcha/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@artifact-project/recaptcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

reCAPTCHA

reCAPTCHA API & Components

npm i --save-dev @artifact-project/recaptcha

Features

API 🛠
Multi language 🇷🇺🇺🇸🇨🇳
Support mock for testing 🔬
Events💡& Analytics 📊(support ⚡️@perf-tools/keeper)
Components
- React (ready to use)
  - Server side render
  - Dynamic properties
- Vue (in progress, help wanted)
- WebComponent (in progress, help wanted)

Usage

See examples

// As API
import { renderReCaptchaWidget } from '@artifact-project/recaptcha';

const widget = renderReCaptchaWidget({
    el: document.getElementById('captcha-box'),

    params: { // https://developers.google.com/recaptcha/docs/display#render_param
        sitekey: 'XXXX',
        theme: 'dark',
    },

    handle(type, code, error) {
        console.log('type:', type); // Enum('change', 'expired', 'error')
        console.log('code:', code); // 'XXXX' or null
    },

    // Events
    onchallengeshow(challengeRef) {},
    onchallengehide(challengeRef) {},
    onstartattempt(attempt) {
        console.log('attempt.start:', attempt); // {state: 'start', start: 132314124, duration: 0};
    },
    onattempt(attempt) {
        console.log('attempt.resolved:', attempt); // {state: 'verified', start: 132314124, duration: 325325};
    },
});

// As React Compomnent
import { ReCaptcha } from '@artifact-project/recaptcha/react';

const captcha = (
    <ReCaptcha
        sitekey={'XXXX'}
        loading={<span>⏳Loading...</span>}
        onReady={() => console.log('reCAPTCHA is ready')}
        onChange={(code) => console.log('reCAPTCHA code:', code)}
        onExpired={(code) => { /* ... */ }}
        onError={(err) => { /* ... */ }}

        onChallengeShow={() => { /* ... */ }}
        onChallengeHide={() => { /* ... */ }}
        onStartAttempt={(attempt) => { /* ... */ }}
        onAttempt={(attempt) => { /* ... */ }}
    />
);

Advanced API

import {
    installReCaptchaSDK,
    renderReCaptchaWidget,
} from '@artifact-project/recaptcha';

installReCaptchaSDK().then(() => {
    console.log('reCAPTCHA SDK —> loaded');
});

renderReCaptchaWidget({ ... }).ready.then(widget => {
    console.log('reCAPTCHA SDK —> loaded');
    console.log('reCAPTCHA Widget —> rendered');
})

Enterprise recaptcha

Чтобы подключить enterprise версию рекаптчи, необходимо передать isEnterprise флаг.

// As API
import { renderReCaptchaWidget } from '@artifact-project/recaptcha';

const widget = renderReCaptchaWidget({
    params: {
        sitekey: 'XXXX',
        theme: 'dark',
        isEnterprise: true
    },
    ...
});

// As React Compomnent
import { ReCaptcha } from '@artifact-project/recaptcha/react';

const captcha = (
    <ReCaptcha
        sitekey={'XXXX'}
        isEnterprise
    />
);

Testing / Mock

React component

See example

import { ReCaptcha, ReCaptchaContextMock } from '@artifact-project/recaptcha/react';

const captchaWithMock = (
    <ReCaptchaContextMock.Provider value={{
        code: 'xx123xx',
        ctrlProps: {'data-qa': 'recaptcha-btn'},
        okProps: {'data-qa': 'recaptcha-successfully'},
    }}>
        <ReCaptcha
            sitekey={'XXXX'}
            onChange={(code) => {
                console.log('reCAPTCHA code:', code); // always: 'xx123xx'
            }}
        />
    </ReCaptchaContextMock.Provider>
);

Analytics

import { renderReCaptchaWidget } from '@artifact-project/recaptcha';
import { createReCaptchaAnalytics } from '@artifact-project/recaptcha/analytics';

const analytics = createReCaptchaAnalytics('LoginPage');

renderReCaptchaWidget({
    el: document.getElementById('captcha-box'),
    params: { /*...*/ },
    ...analytics.mixin('native'), // added `on`-props
});

document.getElementById('login-form').addEventListener('submit', () => {
    const stats = analytics.get();

    sendToMyAnalytics(analytics.name, stats);
    analytics.clear();

    // ...
});

Using with ⚡️@perf-tools/keeper

import { system as systemKepper } from '@perf-tools/keeper';
import { createReCaptchaAnalytics } from '@artifact-project/recaptcha/analytics';

const analytics = createReCaptchaAnalytics('Login', {
    keeper: systemKepper,
});

// ... bla-bla-bla

Analytics in keeper