@nicolaz/qrcode NPM

@nicolaz/qrcode

跨浏览器的 JavaScript 版 QRCode 生成库。Fork 自 QRcode，使其支持 ESM 环境。

安装

npm i @nicolaz/qrcode

使用

import QRCode from '@nicolaz/qrcode';

原生 JavaScript 中

new QRCode(document.getElementById('qrcode'), 'http://www.baidu.com');

React

function QRCode({ url }) {
  const el = useRef(null);
  useEffect(() => {
    new QRCode(el.current, url);
  }, []);

  return (
    <div ref={el} className="qrcode" />
  );
}

API

构造函数参数

Element

Type: HTMLElement | String

如果是 String 则认为是元素的 ID 选择器

Options

Type: Object | String

如果是 Object 则认为是一个配置对象：

属性	描述	默认值
text	QRCode 数据源
width	渲染宽度	256
height	渲染高度	256
colorDark	前景色	`"#000000"`
colorLight	背景色	`"#ffffff"`
correctLevel	容错级别	`QRCode.correctLevel.H`