Skip to content
reCAPTCHA API wrapper + Base Components (vue, react, web-component)
Branch: master
Clone or download
Latest commit 19a1f3d Mar 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
_stories + web & vue components Mar 15, 2019
react + web & vue components Mar 15, 2019
src
types
vue
web-component + web & vue components Mar 15, 2019
.gitignore + initial commit Mar 13, 2019
README.md + web & vue components Mar 15, 2019
index.ts
jest.config.js + initial commit Mar 13, 2019
package.json
tsconfig.json + web-component Mar 14, 2019
webpack.config.js + web & vue components Mar 15, 2019

README.md

reCAPTCHA

reCAPTCHA API & Components

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

Features

  • API 🛠
  • Multi language 🇷🇺🇺🇸🇨🇳
  • Support mock for testing 🔬
  • 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>⏳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>
);
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.