astandro/react-slide-captcha

Slide Captcha for React by Typescript

react-slide-captcha

1.Usage

(1) Installation

npm i -S react-slide-captcha

(2) require

1. react 
2. react-dom

(3) simple example

import SlideCaptcha from 'react-slide-captcha';
import 'react-slide-captcha/dist/styles.css';

<SlideCaptcha
   puzzleUrl={this.state.puzzleUrl}
   bgUrl={this.state.bgUrl}
   onRequest={this.resultCallback}
   containerClassName="test"
/>

2 Live Demo

(1) Desktop Demo

[Desktop Demo]

(2) Mobile Demo

3 API （2.x）

Properties	Descrition	Type	Default
puzzleUrl	URL for puzzlei mage（required）	string	-
bgUrl	URL for background image（required）	string	-
onRequest	requeset callback（required）	(validateValue: number, validatedSuccess: any, validatedFail?: any) => void	-
slidedImage	element for slided（optional）	JSX.Element	'defalut svg'
slidedImageMoving	moving element for slided（optional）	JSX.Element	'default moving svg'
slidedImageSuccess	success element for slided（optional）	JSX.Element	'default success svg'
slidedImageError	error element for slided（optional）	JSX.Element	'defalut default error svg'
containerClassName	container class（optional）	any	-
style	container style（optional）	object	-
tipsText	text for tips（optional）	string	-
tipsClassName	tips class（optional）	any	-
tipsStyle	tips style（optional）	object	-
robotValidate	robot validate config（optional）	object: { offsetY: number, handler: () => any,}	-
reset	component reset type auto/manual （optional）	string	auto
resetButton	component reset type none/inline/outline（optional）	JSX.Element	'auto'
resetButtonElement	component reset type（optional）	string	default button svg
onReset	reset call back（optional）	() => any	-
imagePosition	bg image position type top/bottom （optional）	string	'bottom'
isLoading	loading status（optional）	boolean	false
loadingIcon	loading icon（optional）	JSX.Element	defalut loading svg
displayType	display type hover/static（optional）	string	'hover'
hoverPanelStyle	hover panel style（optional）	object	-
hoverPanelClassName	hover panel className（optional）	string	-

4 License

This entire project are built based on MIT license

MIT