推荐！一款支持PC端&移动端的滑动验证组件

• react hooks + canvas 技术技术选型
• dumi 为组件开发场景而生的文档工具
• fatherjs 组件打包工具
• gihub actions 持续集成方案

目前已经在 github 完全开源, 在文末会附上 github 的地址和文档, 如果恰好你也有类似的需求, 也可以参考该方案的实现方式, 如果你对该项目感兴趣, 也可以随时提 issue 或者参与贡献.

项目介绍和基本使用

上图是一个基本的演示demo, react-slider-vertify 目前提供了很多自定义的属性供用户来配置, 具体属性如下:

接下来和大家介绍一下安装使用方式.

安装

# or yarn add @alex_xu/react-slider-vertify 
npm install @alex_xu/react-slider-vertify 

使用

import React from 'react'; 
import { Vertify } from '@alex_xu/react-slider-vertify'; 
 
export default () => { 
    return       
}; 

一个更完整的使用案例:

代码如下:

import React, { useState } from 'react'; 
import { Vertify } from '@alex_xu/react-slider-vertify'; 
 
export default () => { 
    const [visible, setVisible] = useState(false); 
    const show = () => { 
        setVisible(true) 
    } 
    const hide = () => { 
        setVisible(false) 
    } 
    const style = { 
        display: 'inline-block', 
        marginRight: '20px', 
        marginBottom: '20px', 
        width: '100px',  
        padding: '5px 20px',  
        color: '#fff',  
        textAlign: 'center', 
        cursor: 'pointer', 
        background: '#1991FA' 
    } 
    return <> 
        显示