@nixjs23n6/qrcode-react
v0.0.1
Published
A React component to generate QRCode.
Downloads
499
Maintainers
Readme
@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"
/>