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:
| Level | Error resistance |
|---|---|
| L (Low) | ~7% |
| M (Medium) | ~15% |
| Q (Quartile) | ~25% |
| H (High) | ~30% |
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" />