QR Code 是指二维码，现在已经成为了一种非常流行的信息分享方式。在 Web 环境下，生成和展示 QR Code 已经成为了一项非常基础的需求。
qr-code-react 是一个特别方便的 npm 包，可以用来在 React 项目中快速生成、展示和下载 QR Code，底层使用的是 qr.js 库。
安装
使用 npm 进行安装：
npm install --save qr-code-react
使用
在需要使用 QR Code 的组件中，引入 QRCode 组件：
import React from 'react'; import QRCode from 'qr-code-react';
基本使用
<QRCode value="https://www.example.com" />
在组件中的 value 属性中指定二维码的内容。
自定义样式
QRCode 支持三个自定义样式属性：
- size：二维码的尺寸，默认为 128px；
- color：二维码的颜色，默认为 #000000；
- bgColor：二维码的背景颜色，默认为 #FFFFFF。
<QRCode value="https://www.example.com" size={256} color="#3f51b5" bgColor="#facd72" />二维码下载
QRCode 组件内置了下载二维码的功能，只需要在组件内设置 download 属性即可。
<QRCode value="https://www.example.com" download="example.png" />
二维码使用场景
QRCode 普遍应用在以下场景：
- 制作名片，方便联系；
- 转移信息，从线下场景转移到线上；
- 扫描付款码等。
示例代码
下面是一个完整的示例代码，其中 value 属性根据输入框中的内容动态变化：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- ----------------
-------- ----- -
----- ------- --------- - ------------------------------------
----- ------------ - ------- -- -
-----------------------------
--
------ -
-----
------ ----------- ------------- ----------------------- --
------- ------------- ---------- --------------- ----------------- ---------------------- --
------
--
-
------ ------- ----总结
qr-code-react 是一个非常方便实用的 npm 包，使用简单且功能丰富。在 React 项目中使用 qr-code-react，可以非常轻松地生成和展示二维码，提升用户体验和信息传递效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005565381e8991b448d330d