React中使用qrcodejs2生成二维码

2021-05-25

qrcodejs2是一个轻量级操作二维码的js库，在React中使用非常方便。

安装

$ yarn add qrcodejs2

或

$ npm install qrcodejs2

使用

import React, { useEffect, useState, useRef } from "react";
import QRCode from 'qrcodejs2';

export default function QRTest() {

  const qrcodeRef = useRef();

	useEffect(() => {
		let text = 'Hello World!';
		qrcodeRef.current.innerHTML = '';
		//qrcode.clear(); 
		var qrcode = new QRCode(qrcodeRef.current, {
			text: text, 
			width: 150,
			height: 150,
			// render: 'canvas'
			// colorDark: '#000000',
			// colorLight: '#ffffff',
			// correctLevel: QRCode.CorrectLevel.H,
		});
	}, [])

  return (
    <>
      <div>
        <div id="qrcode" ref={qrcodeRef}></div>
      </div>
    </>
  );
}

qrcodejs2已经多年未更新，核心功能一般够用。

GitHub: https://github.com/davidshimjs/qrcodejs

技术