1.0.4 • Published 1 year ago
react18-verify-code v1.0.4
react18-verify-code
基于 React18 和 canvas 的验证码组件
安装
npm i react18-verify-codeAPIS
| 名称 | 类型 | 是否必填 | 默认值 | 描述 |
|---|---|---|---|---|
height | number | 否 | 40 | 验证码的高度 |
width | number | 否 | 100 | 验证码的宽度 |
bgColor | string | 否 | #DFF0D8 | 背景颜色 |
charNum | number | 否 | 4 | 字符个数 |
fontSize | number | 否 | 25 | 字体大小 |
code | string | 否 | 要展示的验证码（受控） | |
onChange | (captcha: string) => void | 否 | 点击验证码的回调函数, 用来传递验证码（会在页面初始加载和点击验证码时调用） | |
onClick | () => void | 否 | 点击验证码的回调函数 | |
onRef | (ref: any) => void | 否 | 不推荐使用，推荐使用下面的 ref 获取刷新接口 | |
ref | - | 否 | 推荐使用 ref 获取刷新接口canvasRef.current.refresh() 组件内部通过过useImperativeHandle 暴露 refresh 接口 | |
className | string | 否 | 样式名 |
基本用法
代码示例
import React, { useCallback, useRef } from 'react';
import Captcha from 'react-captcha-code';
export const Basic = () => {
const handleChange = useCallback((captcha) => {
console.log('captcha:', captcha);
}, []);
const captchaRef = useRef<HTMLCanvasElement>();
const handleClick = () => {
// 刷新验证码
(captchaRef as any).current.refresh();
};
return (
<>
<Captcha ref={captchaRef} charNum={6} onChange={handleChange} />
<div>
<button onClick={handleClick}>更换验证码</button>
</div>
</>
);
};