QRCode React 完全指南：现代化二维码生成解决方案

前言

在数字化时代，二维码已经成为连接线上线下的重要桥梁。无论是分享链接、支付码、还是身份验证，二维码都扮演着不可或缺的角色。qrcode.react 是一个专门为 React 应用设计的二维码生成库，它能够快速、灵活地生成各种样式的二维码，为开发者提供了简单而强大的二维码解决方案。

它是什么？

qrcode.react 是一个轻量级的 React 组件库，用于生成二维码。它基于 qrcode 库构建，提供了丰富的自定义选项和优秀的性能表现，是 React 生态中最受欢迎的二维码生成解决方案之一。

主要特性

• React 组件化：原生 React 组件，完美融入组件化开发
• 高度可定制：支持颜色、尺寸、纠错级别等多种自定义选项
• TypeScript 支持：完整的类型定义，开发体验优秀
• 轻量级：体积小巧，性能优秀
• 无依赖：除了 React 外无其他外部依赖
• 服务端渲染支持：兼容 SSR 环境
• 多种格式支持：支持 SVG 和 Canvas 两种渲染方式
• 现代化导出：4.2.0+ 版本提供 QRCodeCanvas 和 QRCodeSVG 组件

安装方式

# npm
npm install qrcode.react

# yarn
yarn add qrcode.react

# pnpm
pnpm add qrcode.react

快速上手

基础用法

import React from "react";
import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";

function BasicQRCode() {
  return (
    <div>
      <h2>基础二维码</h2>
      {/* 使用 SVG 渲染（推荐） */}
      <QRCodeSVG value="https://code.ifrontend.net" />

      {/* 使用 Canvas 渲染 */}
      <QRCodeCanvas value="https://code.ifrontend.net" />
    </div>
  );
}

export default BasicQRCode;

自定义样式

import React from "react";
import { QRCodeSVG } from "qrcode.react";

function CustomQRCode() {
  return (
    <div>
      <h2>自定义样式二维码</h2>
      <QRCodeSVG
        value="https://code.ifrontend.net"
        size={200}
        bgColor="#ffffff"
        fgColor="#000000"
        level="M"
        includeMargin={true}
        marginSize={4}
      />
    </div>
  );
}

export default CustomQRCode;

高级用法

带 Logo 的二维码

import React from "react";
import { QRCodeSVG } from "qrcode.react";
import logo from "@/assets/logo.png";

function QRCodeWithLogo() {
  return (
    <div style={{ position: "relative", display: "inline-block" }}>
      <QRCodeSVG
        value="https://code.ifrontend.net"
        size={200}
        level="H" // 使用高纠错级别
        includeMargin={true}
      />
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          backgroundColor: "white",
          padding: "8px",
          borderRadius: "4px",
          border: "1px solid #ccc",
        }}
      >
        <img src={logo} alt="Logo" style={{ width: "40px", height: "40px" }} />
      </div>
    </div>
  );
}

export default QRCodeWithLogo;

多种颜色主题

import React, { useState } from "react";
import { QRCodeSVG } from "qrcode.react";

function ThemedQRCode() {
  const [theme, setTheme] = useState("default");

  const themes = {
    default: { bgColor: "#ffffff", fgColor: "#000000" },
    blue: { bgColor: "#f0f8ff", fgColor: "#0066cc" },
    green: { bgColor: "#f0fff0", fgColor: "#006600" },
    red: { bgColor: "#fff0f0", fgColor: "#cc0000" },
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8">
      <div className="max-w-4xl mx-auto">
        {/* 主要内容区域 */}
        <div className="bg-white rounded-2xl shadow-xl p-8">
          {/* 主题选择区域 */}
          <div className="mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">
              选择主题
            </h2>
            <div className="flex flex-wrap gap-3 justify-center">
              {Object.keys(themes).map((themeName) => (
                <button
                  key={themeName}
                  onClick={() => setTheme(themeName)}
                  className={`
                    px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105
                    ${
                      theme === themeName
                        ? "bg-blue-600 text-white shadow-lg ring-2 ring-blue-300"
                        : "bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200"
                    }
                  `}
                >
                  <span className="capitalize">{themeName}</span>
                </button>
              ))}
            </div>
          </div>

          {/* 二维码显示区域 */}
          <div className="flex flex-col items-center">
            <div className="bg-white p-6 rounded-xl shadow-lg border-2 border-gray-100 mb-4">
              <QRCodeSVG
                value="https://code.ifrontend.net"
                size={200}
                bgColor={themes[theme].bgColor}
                fgColor={themes[theme].fgColor}
                level="M"
              />
            </div>

            {/* 二维码信息 */}
            <div className="text-center">
              <p className="text-gray-600 mb-2">
                当前主题:{" "}
                <span className="font-semibold text-gray-800 capitalize">
                  {theme}
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ThemedQRCode;

二维码下载功能

import React, { useRef } from "react";
import { QRCodeCanvas } from "qrcode.react";

function DownloadableQRCode() {
  const qrRef = useRef(null);

  // canvas 下载
  const downloadCanvasQRCode = () => {
    const canvas = qrRef.current.querySelector("canvas");
    if (canvas) {
      const link = document.createElement("a");
      link.download = "qrcode.png";
      link.href = canvas.toDataURL();
      link.click();
    }
  };

  // svg 下载
  const downloadSVGQRCode = () => {
    const svg = qrRef.current.querySelector("svg");
    if (svg) {
      // 将 SVG 转换为字符串
      const svgData = new XMLSerializer().serializeToString(svg);

      // 创建 Blob 对象
      const svgBlob = new Blob([svgData], {
        type: "image/svg+xml;charset=utf-8",
      });

      // 创建下载链接
      const link = document.createElement("a");
      link.download = "qrcode.svg";
      link.href = URL.createObjectURL(svgBlob);
      link.click();

      // 清理 URL 对象
      URL.revokeObjectURL(link.href);
    }
  };

  return (
    <div>
      <h2>可下载的二维码</h2>
      <div ref={qrRef}>
        <QRCodeCanvas value="https://code.ifrontend.net" size={200} />
      </div>
      <button onClick={downloadQRCode} style={{ marginTop: "20px" }}>
        下载二维码
      </button>
    </div>
  );
}

export default DownloadableQRCode;

为什么选它？

丰富的自定义选项

// 完整的自定义能力
<QRCodeSVG
  value="https://example.com"
  size={200} // 尺寸
  bgColor="#ffffff" // 背景色
  fgColor="#000000" // 前景色
  level="M" // 纠错级别
  includeMargin={true} // 包含边距
  marginSize={4} // 边距大小
/>

TypeScript 支持

// 完整的类型定义
import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";

interface QRCodeProps {
  value: string;
  size?: number;
  bgColor?: string;
  fgColor?: string;
  level?: "L" | "M" | "Q" | "H";
  includeMargin?: boolean;
  marginSize?: number;
}

// 类型安全的开发体验

总结

qrcode.react 是现代 React 应用中生成二维码的最佳选择之一，它简单、可靠、高效，能够满足大多数二维码生成需求。无论是简单的链接分享还是复杂的业务场景，它都能提供出色的解决方案。

如果你觉得这篇文章对你有所帮助，欢迎点赞 👍、分享 📤，让更多开发者受益！

QRCode React 完全指南：现代化二维码生成解决方案 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享