React QR Code

DataModulesSettings

These are the properties you can use to customize the QR Code data modules (the small squares that make up the QR Code).

PropTypeDescriptionDefaultRequiredPossible Values
color
string
The color of the modules#000000No
style
DataModulesStyle
The style of the modulessquareNo
circle
circuit-board
diamond
hashtag
heart
horizontal-line
leaf
pinched-square
rounded
square
square-sm
star
vertical-line
randomSize
boolean
If true, the modules will have random sizes. Can only be used with styles square, pinched-square, circle, diamond, star, heart and hashtag.falseNo
true
false
size
number
Fixed size multiplier applied to each data module (1 = full size). Keep between 0.75 and 1 for best results — lower values may degrade scannability. Only applies to styles square, pinched-square, circle, diamond, star, heart and hashtag. Ignored when randomSize is true.1No
lineWidth
number
Width of the stroke for connected-shape styles, in module units. Only applies to vertical-line, horizontal-line, rounded, and circuit-board. Keep between 0.25 and 1; values outside this range may degrade scannability or overflow neighbouring cells.1 (0.5 for circuit-board)No