@devmehq/反应-qr-代码

QQ 简单和高级反应组件生成 QR 代码 带有自定义的样式、多种渲染格式和图像嵌入支持.

* 特性

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

* 安装

# 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 快速启动

基本用途

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

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

带有自定义样式

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

彩绘

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/图像

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 道具

反应QrCodeImage 方案

错误校正级别

• 造型和自定义

响应设计

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

暗模式支持

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 类

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

/* 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 密码共享

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

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

联系方式( vCard)

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" />
}

双向认证

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,
        },
      ]}
    />
  )
}

支付链接

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

测试

# Run tests
yarn test

# Run tests in watch mode
yarn test:watch

# Generate coverage report
yarn test:coverage

发展

# Install dependencies
yarn install

# Build the library
yarn build

# Run linting
yarn lint-js

# Format code
yarn prettier

捐款

欢迎捐款! 请读我们的 贡献指南 详细介绍我们的行为守则和提交拉动请求的程序.

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 码扫描器组件

许可证

这个项目根据麻省理工学院许可证颁发——见 自由主义 详细文件.

承认

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

++ 辅助

支持, 电子邮件 支持@ dev.me 或打开一个问题 GitHub 图像。 。 。 .