如何使用 qrcode.react生成二维码

女生也可以敲代码2025-04-11 10:00

qrcode.react（查看官网）是一个用于 React 应用的 QR 码生成组件。下面是如何使用它的详细指南：

1、安装

typescript 复制代码

npm install qrcode.react
# 或者
yarn add qrcode.react

2、基本用法

typescript 复制代码

import {QRCodeSVG} from 'qrcode.react';


const myPage = () => {
  return (
  	<div>
   		<QRCodeSVG value="https://reactjs.org/" />
   		<p>扫一扫打开链接</p>
   </div>
  );
};

export default myPage;

3、效果展示

4、可配置数据

size: QR 码的大小（像素），默认 128
level: 纠错级别，可选 'L', 'M', 'Q', 'H'（从低到高），默认 'L'
bgColor: 背景色，默认 "#FFFFFF"
fgColor: 前景色（QR码颜色），默认 "#000000"
includeMargin: 是否包含边距，默认 false
renderAs: 渲染方式，可选 'canvas' 或 'svg'，默认 'svg'

5、注意事项

确保 value 属性不为空，否则会抛出错误
对于 SVG 渲染，所有尺寸都应该是整数
如果需要更复杂的 QR 码生成功能，可能需要考虑其他库