使用方法

直接使用各个二维码样式的组件即可

每种二维码样式可以去在线体验网址获得直观的视觉变化

基本使用方法

import React from 'react'
import { QRNormal } from 'react-qrbtf'

class Component extends React.Component {

    render() {
        return (
            <QRNormal
                value="react-qrbtf"
                className="my-qrcode"
                styles={{ svg: {width: "200px"} }}
                type="round"
                size={50}
                opacity={80}
                posType="planet"
                otherColor="#33CCCC"
                posColor="#009999"
            />
        )
    }
}

关于 QRCode 类型

所有样式都具有2个属性: value 和 qrcode

其中 value 是需要编码的文本型数据，qrcode是编码后的特殊对象，里面有点阵信息

仅使用 value (均为空则value使用默认值)，会在显示二维码之前计算出 qrcode

因此，如果需要对同一数据生成不同的二维码样式，建议用下述方法显式计算出 qrcode 以减少性能开销

import React from 'react';
import { QRDsj, QRNormal } from 'react-qrbtf';
import {encodeData} from "react-qrbtf";

function App() {
    const qrcode = encodeData({ text: "react-qrbtf" });
    return (
        <div className="App">
            <QRNormal qrcode={qrcode} />
            <QRDsj qrcode={qrcode} />
        </div>
  );
}