综合技术

reCAPTCHA API wrapper + Base Components (vue, react, web-component)

微信扫一扫,分享到朋友圈

reCAPTCHA API wrapper + Base Components (vue, react, web-component)
0

reCAPTCHA

reCAPTCHA API
& Components

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

Features

  • API
  • Multi language :ru:
    :us:
    :cn:
  • Support mock for testing :microscope:
  • Components

    • Vue
      (in progress)
    • WebComponent
      (in progress)
    • React
      (ready to use)

      • Server side render
      • Dynamic properties

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>:hourglass_flowing_sand: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>
);
阅读原文...

Github

Twitter tests conversation 'subscriptions'

上一篇

Google is going all-in on the squircle icon for the Play Store

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
reCAPTCHA API wrapper + Base Components (vue, react, web-component)

长按储存图像,分享给朋友