Feature Request: Add configurable module spacing/gap support for all QR styles (circle, rounded, vertical lines, etc.)

[pparmar000]

Hi team,

First of all, thanks for this awesome QR code package.

I would like to request a feature to support spacing/gap between QR modules (small squares/dots). Currently the modules are rendered without any spacing, but having configurable gaps would help create more modern and stylish QR designs.

Example idea:

Add a prop like moduleGap or gap
Allow values in px or percentage
Should work with square, circle, rounded, vertical lines, etc. styles

Currently, the modules are merging together when using these styles, especially for circle and line-based patterns. Because of this, the final QR loses the separated/stylish appearance.

It would be great to have a prop like: moduleGap={2} or gap={2}

Example usage:

This would help maintain visible spacing between modules and improve QR styling/customization.

Attached image for reference - currently the data modules are merging together.

Thanks!

[LGLabGreg]

@pparmar000 Thanks for the suggestions, I added new size and lineWidth props to the DataModulesSettings in v1.7.0, more details here: https://reactqrcode.com/data-modules-settings. You can play around with it on the demo: https://reactqrcode.com/demo. Let me know if any issues.

[pparmar000]

Thank you so much for the quick response and for adding the size and lineWidth props in v1.7.0. I really appreciate the support and the effort you put into improving the library. The new customization options are exactly what I was looking for. I’ll try them out on the demo. Thanks again!🙌