• Stars
    star
    189
  • Rank 204,649 (Top 5 %)
  • Language
    JavaScript
  • Created about 3 years ago
  • Updated 11 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

基于react实现的滑动验证码组件

npm downloads npm bundle size APM

Hello react-slider-vertify!

react-slider-vertify 是一款前端实现的滑动验证码组件, 我们可以通过它轻松的控制验证的整个生命周期(刷新时, 验证成功时, 验证失败时的回调), 并拥有一定的配置化能力.

demo.gif

doc

react-slider-vertify

Getting Started

Install dependencies,

$ npm i @alex_xu/react-slider-vertify

Use

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 (
    <>
      <div onClick={show} style={style}>
        显示
      </div>
      <div onClick={hide} style={style}>
        隐藏
      </div>
      <Vertify
        width={320}
        height={160}
        visible={visible}
        onSuccess={() => alert('success')}
        onFail={() => alert('fail')}
        onRefresh={() => alert('refresh')}
      />
    </>
  );
};

More Production

name Description
H5-Dooring 让 H5 制作像搭积木一样简单, 轻松搭建 H5 页面, H5 网站, PC 端网站, LowCode 平台.
V6.Dooring 可视化大屏解决方案, 提供一套可视化编辑引擎, 助力个人或企业轻松定制自己的可视化大屏应用.
dooring-electron-lowcode 基于 electron 的 H5-Dooring 编辑器桌面端.
DooringX 快速高效搭建可视化拖拽平台.
Mitu 一款轻量级且可扩展的图片/图形编辑器解决方案.

Inspired by

https://github.com/yeild/jigsaw

赞助 | Sponsored

开源不易, 有了您的赞助, 我们会做的更好~

技术反馈和交流群 | Technical feedback and communication

微信:beautifulFront

More Repositories

1

h5-Dooring

H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
JavaScript
9,019
star
2

frontend-developer-roadmap

前端学习之路, 记录前端小白成长历程, 学习总结, 工具汇总, 打造开箱即用的学习体验
584
star
3

next-admin

An out-of-the-box admin based on NextJS and AntDesign | 一款基于nextjs+antd5.0的中后台系统
TypeScript
478
star
4

pc-Dooring

LowCode, PC Page Maker, PC Editor. Make PC as easy as building blocks. | 让网页制作像搭积木一样简单, 轻松搭建PC页面, Web网站, PC端网站. lowcode(low-code)可视化搭建平台
TypeScript
474
star
5

v6.dooring.public

可视化大屏解决方案, 提供一套可视化编辑引擎, 助力个人或企业轻松定制自己的可视化大屏应用.
TypeScript
454
star
6

xijs

A business - oriented scene Js Library
TypeScript
342
star
7

XPCMS

基于node的cms系统, 后端采用node+koa+redis,并通过本人封装的redis库实现数据操作,前端采用vue+ts+vuex开发,后台管理系统采用react全家桶开发
JavaScript
218
star
8

Nocode-Wep

一款轻量WPS替代品,面向AI,面向未来
TypeScript
176
star
9

rc-drag

An React Component for drag and resize, and supports drag and zoom on mobile devices. | 基于react的轻量级拖拽缩放组件, 且支持移动设备拖拽缩放.
JavaScript
100
star
10

simpleCMS

simpleCMS是一款开源cms系统, 主要为个人/团队快速开发博客或者知识共享平台, 类似于hexo, worldpress, 但是他们往往需要复杂的搭建过程, 我们将复杂度降到最低, 并且有详细的部署教程, 你只需要有一台服务器, 就能轻松拥有一个属于你的博客平台.
TypeScript
80
star
11

xu_ui

基于react的轻量级可扩展组件库
JavaScript
77
star
12

lowcode-cms

基于dooring低代码社区的开源cms系统
JavaScript
75
star
13

vue-slider-vertify

基于vue3的滑动验证码组件
Vue
57
star
14

vue3-drag-demo

基于开源生态的拖拽搭建demo, 支持参考线, 全选合并, 吸附以及撤销重做等
Vue
50
star
15

H5-Stream

基于自然流布局的H5-dooring可视化拖拽搭建平台设计方案
TypeScript
44
star
16

crawel

基于Apify+node+react搭建的有点意思的爬虫平台
JavaScript
42
star
17

react-sign

简单轻量的电子签名组件, 轻松定制可扩展的电子签名.
TypeScript
37
star
18

openCoder

基于程序员的项目,简历,blog管理平台
JavaScript
33
star
19

react-cropper-pro

Lightweight image upload cropping component based on react
TypeScript
33
star
20

t-nav

开箱即用的开源导航项目
TypeScript
32
star
21

react-flow

react-flow中文文档.
TypeScript
31
star
22

best-cps

一套前端多包管理最佳实践,一套前端基础工程规范,一套前端效能组件实践
TypeScript
28
star
23

react-loading

Load animation component library based on react.
Less
24
star
24

timeout_rollup

使用rollup打包开源库并发布到npm
JavaScript
24
star
25

blink

基于react的css故障艺术库
Less
22
star
26

Xquery

实现类似jquery API风格的轻量级可扩展的原生js框架
JavaScript
22
star
27

webpack4.0_cli

基于webpack4.0搭建的脚手架(支持react/vue/typescript/es6+/jquery+less/scss)
JavaScript
20
star
28

WebComponent

基于Web Component实现的原生组件demo
JavaScript
20
star
29

fetchImg

一款提取网页图片数据的浏览器插件
JavaScript
20
star
30

xui

一个基于vue的轻量级可扩展组件库
JavaScript
19
star
31

FP

基于react/vue的表单定制管理平台
JavaScript
16
star
32

smart-node-tpl

支持最新es语法的nodejs开发环境模版,助力于快速搭建nodejs项目
JavaScript
16
star
33

H5-

H5游戏算法和游戏清单
JavaScript
14
star
34

H5-Dooring-Website

基于H5编辑器H5-Dooring开发的一站式宣传网站模版
CSS
14
star
35

h5-dooring-electron-demo

基于electron打包的H5-Dooring编辑器桌面端
JavaScript
14
star
36

xjFile

原生轻量级js文件上传预览组件
JavaScript
13
star
37

fileServer

基于node开发的免费文件服务器
JavaScript
12
star
38

gulp4_multi_pages

gulp4打包多页面应用
JavaScript
12
star
39

doc.v6.dooring

h5-dooring和v6.dooring可视化搭建产品技术文档,答疑,和低代码组件生态
TypeScript
11
star
40

redux_OA

基于react+redux+redux-thunk+xui开发的todoOA管理平台
JavaScript
11
star
41

xdb

基于indexedDB API二次封装的支持过期时间,且采用promise封装的存储库
TypeScript
11
star
42

lowcode_news_mini

lowcode资讯小程序
JavaScript
10
star
43

flowmix

一款流程可视化驱动的AI搭建引擎
10
star
44

ticker

一个基于react的轻量级刻度线可视化组件
TypeScript
9
star
45

vue_muti_cli

基于cli3的集成vuex,element/antd/mint的单/多页面脚手架
JavaScript
9
star
46

angularDemo

基于angular8搭建旅游路线项目
TypeScript
7
star
47

wx-friendcircle

一款基于antd-mobile开发的H5微信朋友圈应用,支持发布朋友圈, 图片无死角查看, 图片动态布局, 内容/图片懒加载等功能
JavaScript
6
star
48

dao.js

基于localStorage封装的可以设置过期时间的库,并可结合vuex/redux做数据持久化
JavaScript
5
star
49

gulp_for_buge

JavaScript
4
star
50

MrXujiang.github.io

coding for your eyes
HTML
4
star
51

dataAndMethods

数据结构与算法
JavaScript
4
star
52

js_tool

前端工具集,方便在前端开发中快速开发应用,拿来即用,从此不再996
JavaScript
3
star
53

canvas_card

HTML
3
star
54

gulp_for_spa

CSS
3
star
55

t_work

Vue
3
star
56

gulp_for_ts

基于gulp的ts构建开发脚手架
JavaScript
3
star
57

imgGall

HTML
2
star
58

flowmix-flowsome

Useful resources for creating apps and working with flow.
2
star
59

e-shop

HTML
2
star
60

zxzk

CSS
2
star
61

m-zxzk

HTML
2
star
62

test

HTML
2
star
63

jalschool

HTML
2
star
64

ts-react

基于typescript+react+redux+react-router的后台项目构建
JavaScript
2
star
65

wxgzh

微信公众号开发
JavaScript
2
star
66

zxzk_service

CSS
2
star
67

ios_H5

HTML
2
star
68

job100

HTML
2
star
69

cssFrame

css相关开源项目汇总
1
star
70

mysite

CSS
1
star
71

qrcode_maker

一款开源的基于qrcode的二维码定制平台
1
star
72

MrXujiang

Committed to front-end engineering, visual direction of research. (WeChat: Mr_xuxiaoxi)
1
star
73

xu-pro-lerna

lerna练习
TypeScript
1
star
74

vblog

小型博客网站模板
JavaScript
1
star