@nixjs23n6/qrcode-react

A React component to generate QRCode.

Install

yarn add @nixjs23n6/qrcode-react

Interface

export interface QRCodePropArg {
    value: string
    ecLevel?: 'L' | 'M' | 'Q' | 'H'
    enableCORS?: boolean
    size?: number
    margin?: number
    bgColor?: string
    fgColor?: string
    qrStyle?: 'squares' | 'dots'
    imageSettings?: ImageSettings
    className?: string
}

export interface ImageSettings {
    image?: string
    opacity?: number
    height?: number
    width?: number
}

value

The value of the QR code. [Required]

ecLevel

QR codes support four levels of error correction to enable recovery of missing, misread, or obscured data. Greater redundancy is achieved at the cost of being able to store less data. Know more, wikipedia: QR_code.

Possible levels are shown below:

Level	Error resistance
L (Low)	~7%
M (Medium)	~15%
Q (Quartile)	~25%
H (High)	~30%

Default: M

enableCORS

Allowing cross-origin use of images and canvas.Default: false

size

Image size.Default: 125

margin

The width of the white border around the data portion of the code.Default: 15

bgColor

The background color of QRcode.Default: #FFFFFF

fgColor

The foreground color of QRcode.Default: #000000

qrStyle

Style QRcode: 'squares' | 'dots'.Default: squares

imageSettings

Allow user to add logo on QRcode.Default: { opacity: 1, height: 30, width: 30, image: '' }

export interface ImageSettings {
    image?: string
    opacity?: number
    height?: number
    width?: number
}

ImageSettings.image

Logo Image Path or Base64 encoded image.

ImageSettings.opacity

Set opacity for logo.

ImageSettings.height

fixed logo height.

ImageSettings.width

Fixed logo width.

className

Additional CSS class names to add to the container.

Example

import { QRCode } from "@nixjs23n6/qrcode-react"
export const Render = () => <QRCode value="0x2fEC6379E9a0B88D7c4C0BdC20adcFC7A23C3B68"
                imageSettings={{image: 'https:\\cdn.demo.com/busd.svg'}}
                bgColor="#e7e7e7"
                className="qrcode-my-address"
            />