# @devmehq/react-qr-code 中文文档

规范地址：https://npmcn.com/package/%40devmehq/react-qr-code/

版本：1\.0\.11
npm 元数据更新时间：2025-09-06T21:41:09.622Z
中文译文更新时间：2026-11-12T03:40:36.120Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40devmehq/react-qr-code
原文对照：https://npmcn.com/package/%40devmehq/react-qr-code/?lang=original
项目主页：https://github.com/devmehq/react-qr-code#readme
源码仓库：https://github.com/devmehq/react-qr-code

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：210 kB，27 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=17\.0\.2，react-dom \>=17\.0\.2
- 首次发布：2021-12-14T23:33:07.780Z
- 最新版本发布：2025-09-06T21:41:09.420Z
- 近 30 天下载量：4658（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：203（近 12 个月 0 个）

## 中文简介

生成 QR 代码的响应组件

## 安装

```sh
npm install @devmehq/react-qr-code
```

也可以使用：`pnpm add @devmehq/react-qr-code`、`yarn add @devmehq/react-qr-code`、`bun add @devmehq/react-qr-code`

## README

# @devmehq/反应-qr-代码

QQ 简单和高级反应组件生成 [QR 代码](http://en.wikipedia.org/wiki/QR_code) 带有自定义的样式、多种渲染格式和图像嵌入支持.

[![NPM version](https://badgen.net/npm/v/@devmehq/react-qr-code)](https://npm.im/@devmehq/react-qr-code) [![Build Status](https://github.com/devmehq/react-qr-code/workflows/CI/badge.svg)](https://github.com/devmehq/react-qr-code/actions) [![Downloads](https://img.shields.io/npm/dm/@devmehq/react-qr-code.svg)](https://www.npmjs.com/package/@devmehq/react-qr-code) [![Bundle Size](https://badgen.net/bundlephobia/minzip/@devmehq/react-qr-code)](https://bundlephobia.com/package/@devmehq/react-qr-code) [![License](https://badgen.net/npm/license/@devmehq/react-qr-code)](https://github.com/devmehq/react-qr-code/blob/master/LICENSE.md) [![UNPKG](https://img.shields.io/badge/UNPKG-OK-179BD7.svg)](https://unpkg.com/browse/@devmehq/react-qr-code@latest/)

[![Edit react-qr-code-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-qr-code-demo-ccho5l?fontsize=14&hidenavigation=1&theme=dark)

## \* 特性

-   🎨 **可自定义**: 颜色、大小、边距和样式
-   🖼️ **多个格式**: 渲染为 SVG 或 Canvas
-   📱 **响应**: 在所有设备上完美地缩放
-   🏞️ **图像嵌入**: 在 QR 代码中添加标志或图像
-   🛡️ **错误校正**: 四级(L、M、Q、H)
-   📦 **轻巧**: 零依赖性,小捆绑大小
-   🔧 **类型脚本**: 完整类型脚本支持
-   ⚡ **业绩**: 优化渲染与反应钩

## \* 安装

```bash
# Using npm
npm install @devmehq/react-qr-code

# Using yarn
yarn add @devmehq/react-qr-code

# Using pnpm
pnpm add @devmehq/react-qr-code
```

## QQ 快速启动

### 基本用途

```tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function App() {
  return <ReactQrCode value="https://github.com/devmehq/react-qr-code" />
}
```

### 带有自定义样式

```tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function StyledQRCode() {
  return (
    <ReactQrCode
      value="https://your-website.com"
      size={300}
      bgColor="#f3f4f6"
      fgColor="#1f2937"
      level="H"
      marginSize={4}
      style={{ borderRadius: '8px' }}
      className="shadow-lg"
    />
  )
}
```

### 彩绘

```tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function CanvasQRCode() {
  return (
    <ReactQrCode
      value="https://your-website.com"
      renderAs="canvas"
      size={256}
    />
  )
}
```

### 带有Logo/图像

```tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function QRCodeWithLogo() {
  return (
    <ReactQrCode
      value="https://your-website.com"
      size={256}
      images={[
        {
          src: '/logo.png',
          height: 50,
          width: 50,
          excavate: true,
        },
      ]}
    />
  )
}
```

## API 参考

### 反应QrCode 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `value` | `string` | **需求** | 在 QR 代码中编码的值 |
| `renderAs` | `'svg' | 'canvas'` | `'svg'` | 渲染格式( SVG 或 Canvas) |
| `size` | `number` | `256` | 用像素表示的 QR 代码大小 |
| `bgColor` | `string` | `'#ffffff'` | 背景颜色( CSS 颜色值) |
| `fgColor` | `string` | `'#000000'` | 前景颜色( CSS 颜色值) |
| `level` | `'L' | 'M' | 'Q' | 'H'` | `'L'` | 错误更正级别 |
| `marginSize` | `number` | `0` | 以像素表示的 QR 代码边距 |
| `style` | `CSSProperties` | `undefined` | 反应样式对象 |
| `className` | `string` | `undefined` | CSS 类名称 |
| `title` | `string` | `undefined` | SVG 无障碍标题 |
| `id` | `string` | `undefined` | HTML id 属性 |
| `images` | `ReactQrCodeImageProps[]` | `undefined` | 要嵌入 QR 代码的图像阵列 |

### 反应QrCodeImage 方案

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `src` | `string` | **需求** | 图像源 URL |
| `x` | `number` | 自动中心 | 图像的 X 位置 |
| `y` | `number` | 自动中心 | 图像的 Y 位置 |
| `height` | `number` | QR 大小的 10% | 图像的高度 |
| `width` | `number` | QR 大小的 10% | 图像的宽度 |
| `excavate` | `boolean` | `false` | 是否清除图像后面的 QR 模块 |

### 错误校正级别

| 职等 | 错误校正 | 数据能力 |
| --- | --- | --- |
| `L` | ~7%( | 高级 |
| `M` | \- 15% | 中型 |
| `Q` | 约25% | 中线 |
| `H` | ~30% | 低级 |

## • 造型和自定义

### 响应设计

```tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function ResponsiveQRCode() {
  return (
    <div style={{ width: '100%', maxWidth: '400px' }}>
      <ReactQrCode
        value="https://your-website.com"
        size={256}
        style={{ width: '100%', height: 'auto' }}
      />
    </div>
  )
}
```

### 暗模式支持

```tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function DarkModeQRCode({ isDarkMode }) {
  return (
    <ReactQrCode
      value="https://your-website.com"
      bgColor={isDarkMode ? '#1f2937' : '#ffffff'}
      fgColor={isDarkMode ? '#f3f4f6' : '#000000'}
    />
  )
}
```

### 自定义 CSS 类

```tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'
import './styles.css'

function CustomStyledQRCode() {
  return (
    <ReactQrCode
      value="https://your-website.com"
      className="qr-code-custom"
      size={300}
    />
  )
}
```

```css
/* styles.css */
.qr-code-custom {
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
```

**说明:** 使用时 `renderAs="canvas"` 在高密度显示上,画布被缩放成像素-完美渲染. 自定义样式与内部缩放样式相合并.

## 使用大小写

### WiFi 密码共享

```tsx
function WiFiQRCode({ ssid, password, security = 'WPA' }) {
  const wifiString = `WIFI:T:${security};S:${ssid};P:${password};;`

  return <ReactQrCode value={wifiString} size={256} level="H" />
}
```

### 联系方式( vCard)

```tsx
function ContactQRCode({ name, phone, email }) {
  const vCard = `BEGIN:VCARD
VERSION:3.0
FN:${name}
TEL:${phone}
EMAIL:${email}
END:VCARD`

  return <ReactQrCode value={vCard} size={256} level="M" />
}
```

### 双向认证

```tsx
function TwoFactorQRCode({ secret, issuer, accountName }) {
  const otpauth = `otpauth://totp/${issuer}:${accountName}?secret=${secret}&issuer=${issuer}`

  return (
    <ReactQrCode
      value={otpauth}
      size={256}
      level="H"
      images={[
        {
          src: '/logo.png',
          height: 40,
          width: 40,
          excavate: true,
        },
      ]}
    />
  )
}
```

### 支付链接

```tsx
function PaymentQRCode({ amount, recipient, currency = 'USD' }) {
  const paymentLink = `https://pay.example.com/?to=${recipient}&amount=${amount}&currency=${currency}`

  return <ReactQrCode value={paymentLink} size={300} level="H" marginSize={4} />
}
```

![qrcode-demo](https://github.com/devmehq/react-qr-code/raw/master/examples/qrcode-demo.png)

## 测试

```bash
# Run tests
yarn test

# Run tests in watch mode
yarn test:watch

# Generate coverage report
yarn test:coverage
```

## 发展

```bash
# Install dependencies
yarn install

# Build the library
yarn build

# Run linting
yarn lint-js

# Format code
yarn prettier
```

## 捐款

欢迎捐款! 请读我们的 [贡献指南](https://npmcn.com/package/%40devmehq/react-qr-code/CONTRIBUTING.md) 详细介绍我们的行为守则和提交拉动请求的程序.

1.  叉子存储器
2.  创建您的特性分支( E)`git checkout -b feature/amazing-feature`(中文(简体) )
3.  提交更改( E)`git commit -m 'Add some amazing feature'`(中文(简体) )
4.  推向分行(`git push origin feature/amazing-feature`(中文(简体) )
5.  打开拉请求

## \* 路线图

-   [ ] 将 QR 代码下载为图像( PNG/ JPEG/ SVG)
-   [ ] 共享 QR 代码功能
-   [ ] 服务器侧渲染( SSR) 支持
-   [ ] 角点定制
-   [ ] 渐变颜色支持
-   [ ] 自定义形状模块( 圆点、 四舍五入等)
-   [ ] 动画支持
-   [ ] 批量 QR 代码生成
-   [ ] QR 码扫描器组件

## 许可证

这个项目根据麻省理工学院许可证颁发——见 [自由主义](https://npmcn.com/package/%40devmehq/react-qr-code/LICENSE.md) 详细文件.

## 承认

-   QR代码是DENSO WAVE INCORPORATED的注册商标
-   由❤️所建 [DEV.ME (英语)](https://dev.me/) 团队
-   受QR代码规格和社区反馈的启发

## ++ 辅助

支持, 电子邮件 [支持@ dev.me](mailto:support@dev.me) 或打开一个问题 [GitHub 图像](https://github.com/devmehq/react-qr-code/issues)。 。 。 .

* * *

由 Q 制作 [DEV.ME (英语)](https://dev.me/)

## 常见问题

### @devmehq/react-qr-code 是什么？

生成 QR 代码的响应组件

### 如何安装 @devmehq/react-qr-code？

在项目目录运行 npm install @devmehq/react-qr-code，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17\.0\.2）、react-dom（\>=17\.0\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @devmehq/react-qr-code 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @devmehq/react-qr-code 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @devmehq/react-qr-code 可以商用吗？

@devmehq/react-qr-code 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @devmehq/react-qr-code 的下载量有多少？

根据 npm 官方下载统计，@devmehq/react-qr-code 在 2026/10/12 – 2026/11/10 这 30 天内被下载 4,658 次，日均约 155 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @devmehq/react-qr-code 还在维护吗？

最新版本 1\.0\.11 发布于 2025/09/07（1\.2 年前）；至今共发布 203 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/12/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。