@ort-fe/react18-verify-code
v1.0.4
Published
基于React和canvas的验证码
Downloads
11
Readme
react18-verify-code
基于 React18
和 canvas
的一个验证码组件
安装
npm install react18-verify-code --save
APIS
| 名称 | 类型 | 是否必填 | 默认值 | 描述 |
| :---------: | :-------------------------: | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| 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
| 否
| | ~~在验证码组件初次挂载时调用,返回 canvas DOM(可主动调用 canvas.click() 来刷新验证码)~~ 不推荐使用,推荐使用下面的 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>
</>
);
};