React QR Code

ReactQRCode

The @lglab/react-qr-code component provides a flexible and customizable way to generate QR codes in React. Below is a complete list of available props and their descriptions.

PropTypeDescriptionDefaultRequiredPossible Values
value
string | string[]
The value to encode into the QR Code.Yes
size
number
QR Code size in pixels128No
marginSize
number
The number of modules to use for margin. Recommended: 44No
background
string | GradientSettings
QR Code background. hex or GradientSettings. Transparent when no value is provided.No
gradient
GradientSettings
See GradientSettingsNo
dataModulesSettings
DataModulesSettings
See DataModulesSettingsNo
finderPatternOuterSettings
FinderPatternOuterSettings
See FinderPatternOuterSettingsNo
finderPatternInnerSettings
FinderPatternInnerSettings
See FinderPatternInnerSettingsNo
imageSettings
ImageSettings
See ImageSettingsNo
level
ErrorCorrectionLevel
The Error Correction Level to use.MNo
L
M
Q
H
minVersion
number
The minimum version used when encoding the QR Code. The optimal (lowest) version is determined, using minVersion as the lower bound.1No
1-40
boostLevel
boolean
If enabled, the Error Correction Level of the result may be higher than the specified Error Correction Level option if it can be done without increasing the version.trueNo
true
false
ref
React.RefObject<ReactQRCodeRef>
See ReactQRCodeRefNo
svgProps
React.SVGProps<SVGSVGElement>
Props passed to the svg elementNo