# qrcode-react-next

> 基于react的二维码生成器

Latest version **1.0.0** (published 2025-03-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install qrcode-react-next
pnpm add qrcode-react-next
yarn add qrcode-react-next
bun add qrcode-react-next
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2025-03-06 |
| First published | 2025-02-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 89.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | qhy |
| Maintainers | qinhaoyan |
| Keywords | qrcode, react |

## Links

- npm: https://www.npmjs.com/package/qrcode-react-next
- Repository: https://github.com/qkiroc/qrcode-react
- Homepage: https://github.com/qkiroc/qrcode-react#readme
- Issues: https://github.com/qkiroc/qrcode-react/issues
- npm.io page: https://npm.io/package/qrcode-react-next

## Dependencies (1)

- [react](https://npm.io/package/react.md) >16.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2025-03-06
- 0.0.4 — 2025-02-19
- 0.0.3 — 2025-02-17
- 0.0.2 — 2025-02-17
- 0.0.1 — 2025-02-17

## README

# 二维码生成器

一款基于 react 的二维码生成器

demo 试用地址：https://qkiroc.github.io/qrcode-react/

# 安装

```bash
npm install qrcode-react-next
```

# 使用示例

```js
import {QRCode} from 'qrcode-react-next';

function component() {
  return <QRCode value="test" />;
}
```

# 配置说明

| 参数        | 类型              | 默认值 | 是否必填 | 说明                                         |
| ----------- | ----------------- | ------ | -------- | -------------------------------------------- |
| value       | string            | -       | 是       | 二维码的内容                                 |
| mode        | 'svg' \| 'canvas' | 'canvas'| 否       | 二维码的渲染模式                             |
| config      | QRCodeConfig      | -       | 否       | 二维码的配置，包括纠错级别、版本等           |
| styleConfig | QRCodeStyleConfig | -       | 否       | 二维码的样式配置，包括大小、颜色、边距等     |
| logoConfig  | QrCodeLogoConfig  | -       | 否       | 二维码中间的 logo 配置，包括图片路径、宽高等 |
| className   | string            | -       | 否       | 自定义样式类名                               |

## QRCodeConfig 配置说明

| 参数       | 类型               | 默认值 | 是否必填 | 说明             |
| ---------- | ------------------ | ------ | -------- | ---------------- |
| level      | 'L'\|'M'\|'Q'\|'H' | 'L'    | 否       | 纠错级别         |
| minVersion | number             | 1      | 否       | 最小版本         |
| maxVersion | number             | 40     | 否       | 最大版本         |
| mask       | number             | -      | 否       | 掩码模式（-1~7） |
| boostLevel | boolean            | false  | 否       | 是否提升纠错级别 |

## QRCodeStyleConfig 配置说明

| 参数            | 类型                              | 默认值    | 是否必填 | 说明               |
| --------------- | --------------------------------- | --------- | -------- | ------------------ |
| size            | number                            | 200       | 否       | 二维码的大小       |
| margin          | number                            | 4         | 否       | 二维码的边距       |
| color           | string                            | '#000000' | 否       | 二维码的颜色       |
| bgColor         | string                            | '#FFFFFF' | 否       | 二维码的背景颜色   |
| eyeType         | 'default'\| 'rounded' \| 'circle' | 'default' | 否       | 码眼的类型         |
| eyeBorderSize   | 'default' \| 'sm' \| 'xs'         | 'default' | 否       | 码眼边框的大小 |
| eyeBorderColor  | string                            | -         | 否       | 码眼边框的颜色     |
| eyeInnerColor   | string                            | -         | 否       | 码眼内部的颜色     |
| pointType       | 'default' \| 'circle'             | 'default' | 否       | 码点的类型         |
| pointSize       | 'default' \| 'sm' \| 'xs'         | 'default' | 否       | 码点的大小         |
| pointSizeRandom | boolean                           | false     | 否       | 码点的大小是否随机 |

## QrCodeLogoConfig 配置说明

| 参数   | 类型   | 默认值           | 是否必填 | 说明               |
| ------ | ------ | ---------------- | -------- | ------------------ |
| src    | string | -                | 是       | logo 图片的路径    |
| width  | number | 二维码大小的 1/5 | 否       | logo 图片的宽度    |
| height | number | 二维码大小的 1/5 | 否       | logo 图片的高度    |
| x      | number | 居中             | 否       | logo 图片的 x 坐标 |
| y      | number | 居中             | 否       | logo 图片的 y 坐标 |

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