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>
    </>
  );
};

效果