# react-captcha-plus

> 基于React和canvas的验证码

Latest version **1.0.17** (published 2023-09-05) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-captcha-plus
pnpm add react-captcha-plus
yarn add react-captcha-plus
bun add react-captcha-plus
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.17 |
| Published | 2023-09-05 |
| First published | 2023-09-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 41 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | samanhappy |
| Maintainers | samanhappy |
| Keywords | 验证码, react验证码, canvas验证码 |

## Links

- npm: https://www.npmjs.com/package/react-captcha-plus
- Repository: https://github.com/samanhappy/react-captcha
- Homepage: https://github.com/samanhappy/react-captcha#readme
- Issues: https://github.com/samanhappy/react-captcha/issues
- npm.io page: https://npm.io/package/react-captcha-plus

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [classnames](https://npm.io/package/classnames.md) ^2.2.6

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.17 (latest) — 2023-09-05
- 1.0.16 — 2023-09-05
- 1.0.15 — 2023-09-05
- 1.0.14 — 2023-09-05
- 1.0.13 — 2023-09-05
- 1.0.12 — 2023-09-01
- 1.0.11 — 2023-09-01
- 1.0.10 — 2023-09-01
- 1.0.9 — 2023-09-01
- 1.0.8 — 2023-09-01

## README

# react-captcha-code

基于 `React` 和 `canvas` 的一个验证码组件

## 安装

```
npm install react-captcha-code --save
```

## 需要用户自己安装的依赖

同级依赖:

| 依赖名称       |     版本      |
| :------------- | :-----------: |
| ｜ `react`     | `^16.13.1` ｜ |
| ｜ `react-dom` | `^16.13.1` ｜ |

## 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`           |   `否`   |           | 样式名                                                                                                                                  |

## 基本用法

### 代码示例

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

```

### 效果

[![Edit zen-paper-9yish](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zen-paper-9yish?fontsize=14&hidenavigation=1&theme=dark)

# 更新日志

## [1.0.5] - 2021-01-07

### Features

- 暴露`refresh`接口来刷新验证码

### Fix

- `onRef` 改为可选

## [1.0.6] - 2021-02-03

### Features

- 验证码组件支持受控

---
_Source: https://npm.io/package/react-captcha-plus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._