A React component to generate QRCode.

yarn add @nixjs23n6/qrcode-react

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
}

The value of the QR code. [Required]

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:

Default: M

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

Image size.Default: 125

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

The background color of QRcode.Default: #FFFFFF

The foreground color of QRcode.Default: #000000

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

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
}

Logo Image Path or Base64 encoded image.

Set opacity for logo.

fixed logo height.

Fixed logo width.

Additional CSS class names to add to the container.

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"
            />