@adactive/arc-qrcode 中文文档教程

Question

QrCode component

Getting started

    npm i --save @adactive/arc-qrcode

或

    yarn add @adactive/arc-qrcode

Usage

    import AdsumQrCode, { modes, ecLevel } from '@adactive/arc-qrcode';
    ...
    state = {
        openModal: false
    }

    onOpenModal = () => {
        this.setState({ openModal: true });
    };

    onCloseModal = () => {
        this.setState({ openModal: false });
    };

    const qrCodeOptions = {
        size: 400,
        ecLevel: ecLevel.QUARTILE,
        minVersion: 8,
        background: '#fff',
        mode: modes.DRAW_WITH_IMAGE_BOX,
        radius: 0.5,
        image: 'https://raw.githubusercontent.com/AdactiveSAS/adsum-react-components/master/logo.jpg',
        mSize: 0.15,
    };

    <button onClick={this.onOpenModal}>Open QrCode Modal</button>

    <AdsumQrCode
        isOpen={this.state.openModal}
        onClose={this.onCloseModal}
        qrCodeOptions={qrCodeOptions}
        text="https://adactive.com"
    />

Props

type PropsType = {|
    +isOpen: boolean,
    +onClose: () => null,
    +text: string,
    +qrCodeOptions: Object,
    +ModalProps?: Object,
    +qrCodeCSS?: CSSStyleDeclaration
|};

static defaultProps = {
    isOpen: false,
    onClose: () => null,
    text: '',
    qrCodeOptions: {},
    ModalProps: {},
};

isOpen -> 显示或隐藏二维码组件

onClose -> 关闭二维码组件的回调函数

text -> 要嵌入到二维码中的 url 值

qrCodeOptions -> 参考 qrcode.es 获取更多信息

ModalProps -> 参考 react-responsive-modal 获取更多信息

qrCodeCSS -> 为 qrCode 画布自定义 CSS

Copy component inside your project src folder

Less only

`npx @adactive/arc-qrCode copy --less-only`

Full copy

`npx @adactive/arc-qrCode copy`