React 生成圖片驗證碼組件使用

前端開發過程中在與后端對接之前需要自己先造出一些數據，比如：mock等

圖片驗證碼同樣也需要前端自己先生成。

使用插件

react-captcha-code 這是一個基於React(依賴react, react-dom) 和 Canvas 的小插件

安裝

npm install react-captcha-code --save

屬性和方法

名稱	類型	必填	默認值	描述
height	number	否	40	圖片高度
width	number	否	100	圖片寬度
bgColor	string	否	#DFF0D8	背景顏色
charNum	number	否	4	驗證碼字符個數
fontSize	number	否	25	字體大小
onChange	function	是		點擊驗證碼的回調，初始加載也會調用，返回驗證碼值
className	string	否		樣式名

示例

import React, { useCallback } from 'react';
import Captcha from 'react-captcha-code';

export default { title: 'Basic' };

export const Basic = () => {
  const handleClick = useCallback((captcha) => {
    console.log('captcha:', captcha);
  }, []);

  return <Captcha charNum={4} onChange={handleClick} />;
};

export default Basic;