当前位置：首页 > news >正文

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

news 2025/9/14 5:55:30

前言

在数字化时代，二维码已经成为连接线上线下的重要桥梁。无论是分享链接、支付码、还是身份验证，二维码都扮演着不可或缺的角色。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><QRCodeSVGvalue="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" }}><QRCodeSVGvalue="https://code.ifrontend.net"size={200}level="H" // 使用高纠错级别includeMargin={true}/><divstyle={{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) => (<buttonkey={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"><QRCodeSVGvalue="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;

为什么选它？

丰富的自定义选项

// 完整的自定义能力
<QRCodeSVGvalue="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;
}// 类型安全的开发体验