{"id":16773171,"url":"https://github.com/javaluo/react-vcode","last_synced_at":"2025-03-21T23:34:26.313Z","repository":{"id":57347320,"uuid":"93587990","full_name":"javaLuo/react-vcode","owner":"javaLuo","description":"a verification code component for react","archived":false,"fork":false,"pushed_at":"2020-09-16T09:51:20.000Z","size":81,"stargazers_count":49,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T06:22:34.565Z","etag":null,"topics":["react","react-vcode","vcode"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javaLuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-07T03:21:48.000Z","updated_at":"2023-08-03T08:55:28.000Z","dependencies_parsed_at":"2022-08-28T04:01:01.009Z","dependency_job_id":null,"html_url":"https://github.com/javaLuo/react-vcode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Freact-vcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Freact-vcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Freact-vcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Freact-vcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javaLuo","download_url":"https://codeload.github.com/javaLuo/react-vcode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244885403,"owners_count":20526292,"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":["react","react-vcode","vcode"],"created_at":"2024-10-13T06:44:54.403Z","updated_at":"2025-03-21T23:34:26.053Z","avatar_url":"https://github.com/javaLuo.png","language":"TypeScript","readme":"# react-vcode [![npm](https://img.shields.io/npm/v/react-vcode.svg)](https://www.npmjs.com/package/react-vcode) [![codebeat badge](https://codebeat.co/badges/6b270f5e-c8d9-4f47-9f84-2833fcf897aa)](https://codebeat.co/projects/github-com-javaluo-react-vcode-master) [![npm downloads](https://img.shields.io/npm/dt/react-vcode.svg)](https://www.npmjs.com/package/react-vcode)\n一个简单的React验证码组件\n\n## 示例图\n\n![image](example/assets/test1.png)\n\n![image](example/assets/test2.png)\n\n\n## 1. 安装\n\n````\nnpm install react-vcode\n````\n\n## 2. 使用\n\n````\nimport Vcode from 'react-vcode';\n\n \u003cVcode /\u003e\n \n````\n## 3. 服务端渲染\n```\nimport Vcode from 'react-vcode';\n\n \u003cVcode id=\"vcode\" /\u003e\n```\n 需要自己加个id， 不然服务端渲染和本地渲染，id变了会报错，因为Vcode内部使用了随机值\n \n## 4. 自定义参数\n\n可自行设置覆盖原有值\n\n````javascript\nvalue               // string  受控，不设置的话将随机生成验证码 (支持的值: 普通字符串/网络图片路径/import的本地图片/base64)\nonChange            // func    回调，生成新的验证码时触发，将新的验证码字符串返回上级 (如果value字段被传入了图片，将返回null)\nonClick             // func    回调，点击组件本身时触发，外部可通过此回调来更新需要传入的验证码 (如果没设置value，点击就会自动重新生成二维码)\nlength: 4           // number  生成几位验证码（没设置value时有效）\nwidth: 150          // number  容器宽度(px)\nheight: 40          // number  容器高度(px)\nclassName           // string  自定义容器样式class\nstyle: {            // object  容器默认样式 (注：如果在style中设置width和height,将覆盖上面通过属性设置的width和height)\n  position: 'relative',\n  backgroundColor: '#fff',\n  overflow: 'hidden',\n  cursor: 'pointer',\n  verticalAlign: 'middle',\n  userSelect: 'none',\n}\noptions:{           // 验证码相关自定义参数\n  codes: [          // 所有可能出现的字符\n    'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',\n    'o', 'p', 'q', 'r', 's', 't', 'x', 'u', 'v', 'y', 'z', 'w', 'n',\n    '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',\n  ],\n  fontSizeMin: 22,  // 字体尺寸最小值\n  fontSizeMax: 26,  // 字体尺寸最大值\n  colors: [         // 字可能的颜色\n    '#117cb3',\n    '#f47b06',\n    '#202890',\n    '#db1821',\n    '#b812c2',\n  ],\n  fonts: [          // 可能的字体\n    'Times New Roman',\n    'Georgia',\n    'Serif',\n    'sans-serif',\n    'arial',\n    'tahoma',\n    'Hiragino Sans GB',\n  ],\n  lines: 8,         // 生成多少根干扰线\n  lineColors: [     // 线可能的颜色\n    '#7999e1',\n    '#383838',\n    '#ec856d',\n    '#008888',\n  ],\n  lineHeightMin: 1, // 线的粗细最小值\n  lineHeightMax: 2, // 线的粗细最大值\n  lineWidthMin: 40, // 线的长度最小值\n  lineWidthMax: 100, // 线的长度最大值\n}\n\n// 例子：\n\n\u003cVcode\n  length={6}\n  onChange={(v) =\u003e {console.log('当前的验证码值：', v)}}\n  options={{ codes: [ 'A', 'B', 'C' ] }}\n/\u003e\n````\n\n## 5. 手动刷新验证码\n```javascript\n\u003cVcode ref={(obj)=\u003ethis.vcode = obj} /\u003e\n\nthis.vcode.onClick(); // 调用内部的onClick方法可刷新验证码\n```\n\n## 6. 额外说明\n\n- 之前用过一个验证码插件叫 vcode.js, 不知道作者。 本react-vcode是通过vcode.js的源码进行修改加工，转成了react组件。感谢原作者。\n\n## 更新日志\n\n1.0.3 - 2019/03/11\u003cbr/\u003e\n- 去掉UNSAFE_componentWillReceiveProps，使用componentDidUpdate\n- 修复动态改变width、height、style时不刷新的问题\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Freact-vcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavaluo%2Freact-vcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Freact-vcode/lists"}