React-Simple-Slide-Captcha

React-Simple-Slide-Captcha 是一个用于用户滑块行为验证的 React 组件。

演示

安装

npm install react-simple-slide-captcha

基础使用

import React from 'react'
import SlideCaptcha from 'react-simple-slide-captcha'

const App = () => {
	const handleSlideCaptchaChange = (isSuccess: boolean) => {
		if (isSuccess) {
			console.log('验证成功！')
		}
	}

	return (
		<div>
			<SlideCaptcha onChange={handleSlideCaptchaChange} />
		</div>
	)
}

export default App

用户指南

属性

| 属性名 | 描述 | 默认值 | | :----------- | :--------------------------------------------- | :------------------------- | | width | 组件宽度，为 0 时自适应 | 300 | | height | 组件高度，也是滑块高度，滑块宽度等于滑块高度 | 48 | | defaultLabel | 默认文案 | '请按住滑块，拖动到最右边' | | successLabel | 成功文案 | '验证成功' | | failLabel | 失败文案 | '验证失败，请重新验证' | | onChange | 回调函数，成功 isSuccess 为 true，失败为 false | (isSuccess) => {} |

方法

import React, { useRef } from 'react'
import SlideCaptcha, { SlideCaptchaHandle } from 'react-simple-slide-captcha'

const App = () => {
    const slideCaptchaRef = useRef<SlideCaptchaHandle>()

    const handleClick() {
        if (slideCaptchaRef.current) slideCaptchaRef.current.reset()
    }

    return (
        <div>
            <SlideCaptcha ref={slideCaptchaRef} />
            <button onClick={handleClick}>重置</button>
        </div>
    )
}

export default App