{"id":17140063,"url":"https://github.com/mrxujiang/react-slider-vertify","last_synced_at":"2025-04-06T03:05:19.528Z","repository":{"id":37623149,"uuid":"403816626","full_name":"MrXujiang/react-slider-vertify","owner":"MrXujiang","description":"基于react实现的滑动验证码组件","archived":false,"fork":false,"pushed_at":"2023-12-08T09:01:37.000Z","size":72,"stargazers_count":171,"open_issues_count":6,"forks_count":45,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-14T00:37:46.500Z","etag":null,"topics":["canvas","react","react-slider","react-slider-component","react-slider-kit","verification"],"latest_commit_sha":null,"homepage":"http://h5.dooring.cn/slider-vertify","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MrXujiang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-09-07T02:32:36.000Z","updated_at":"2024-03-29T01:14:25.000Z","dependencies_parsed_at":"2023-12-15T16:04:21.123Z","dependency_job_id":"f5c45461-ab80-4464-9d99-233d2d025645","html_url":"https://github.com/MrXujiang/react-slider-vertify","commit_stats":{"total_commits":26,"total_committers":3,"mean_commits":8.666666666666666,"dds":"0.23076923076923073","last_synced_commit":"eb281c14b455b9886f36257871b92490dd7da3fb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrXujiang%2Freact-slider-vertify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrXujiang%2Freact-slider-vertify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrXujiang%2Freact-slider-vertify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrXujiang%2Freact-slider-vertify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrXujiang","download_url":"https://codeload.github.com/MrXujiang/react-slider-vertify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427005,"owners_count":20937200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","react","react-slider","react-slider-component","react-slider-kit","verification"],"created_at":"2024-10-14T20:13:45.561Z","updated_at":"2025-04-06T03:05:19.500Z","avatar_url":"https://github.com/MrXujiang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm downloads](https://img.shields.io/npm/dm/@alex_xu/react-slider-vertify.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@alex_xu/react-slider-vertify) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@alex_xu/react-slider-vertify) ![APM](https://img.shields.io/npm/l/@alex_xu/react-slider-vertify?style=flat-square)\n## Hello react-slider-vertify!\n\nreact-slider-vertify 是一款前端实现的滑动验证码组件, 我们可以通过它轻松的控制验证的整个生命周期(刷新时, 验证成功时, 验证失败时的回调), 并拥有一定的配置化能力.\n\n![demo.gif](http://cdn.dooring.cn/dr/slider.gif)\n\n## doc\n\n[react-slider-vertify](http://h5.dooring.cn/slider-vertify/)\n\n## Getting Started\n\nInstall dependencies,\n\n```bash\n$ npm i @alex_xu/react-slider-vertify\n```\n\n## Use\n\n```tsx\nimport React, { useState } from 'react';\nimport { Vertify } from '@alex_xu/react-slider-vertify';\n\nexport default () =\u003e {\n  const [visible, setVisible] = useState(false);\n  const show = () =\u003e {\n    setVisible(true);\n  };\n  const hide = () =\u003e {\n    setVisible(false);\n  };\n  const style = {\n    display: 'inline-block',\n    marginRight: '20px',\n    marginBottom: '20px',\n    width: '100px',\n    padding: '5px 20px',\n    color: '#fff',\n    textAlign: 'center',\n    cursor: 'pointer',\n    background: '#1991FA',\n  };\n  return (\n    \u003c\u003e\n      \u003cdiv onClick={show} style={style}\u003e\n        显示\n      \u003c/div\u003e\n      \u003cdiv onClick={hide} style={style}\u003e\n        隐藏\n      \u003c/div\u003e\n      \u003cVertify\n        width={320}\n        height={160}\n        visible={visible}\n        onSuccess={() =\u003e alert('success')}\n        onFail={() =\u003e alert('fail')}\n        onRefresh={() =\u003e alert('refresh')}\n      /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## More Production\n\n| name                                                                              | Description                                                                             |\n| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |\n| [H5-Dooring](https://github.com/MrXujiang/h5-Dooring)                             | 让 H5 制作像搭积木一样简单, 轻松搭建 H5 页面, H5 网站, PC 端网站, LowCode 平台.         |\n| [V6.Dooring](https://github.com/MrXujiang/v6.dooring.public)                      | 可视化大屏解决方案, 提供一套可视化编辑引擎, 助力个人或企业轻松定制自己的可视化大屏应用. |\n| [dooring-electron-lowcode](https://github.com/MrXujiang/dooring-electron-lowcode) | 基于 electron 的 H5-Dooring 编辑器桌面端.                                               |\n| [DooringX](https://github.com/H5-Dooring/dooringx)                                | 快速高效搭建可视化拖拽平台.                                                             |\n| [Mitu](https://github.com/H5-Dooring/mitu-editor)                                 | 一款轻量级且可扩展的图片/图形编辑器解决方案.                                            |\n| [react-rotate-captcha](https://github.com/cgfeel/react-rotate-captcha) | 一个开箱即用的旋转验证码React组件 |\n\n## Inspired by\n\nhttps://github.com/yeild/jigsaw\n\n## 赞助 | Sponsored\n\n开源不易, 有了您的赞助, 我们会做的更好~\n\n\u003cimg src=\"http://cdn.dooring.cn/dr/WechatIMG2.jpeg\" width=\"180px\" /\u003e\n\n## 技术反馈和交流群 | Technical feedback and communication\n\n微信：beautifulFront\n\n\u003cimg src=\"http://cdn.dooring.cn/dr/qtqd_code.png\" width=\"180px\" /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrxujiang%2Freact-slider-vertify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrxujiang%2Freact-slider-vertify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrxujiang%2Freact-slider-vertify/lists"}