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