JSPM – @artifact-project/recaptcha@0.1.2

Package Exports

@artifact-project/recaptcha

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 @artifact-project/recaptcha

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
    },
});

// 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) => { /* ... */ }}
    />
);

Advanced API

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

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

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

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>
);