feat: add data modules size option

[LGLabGreg]

Adds dataModulesSettings.size to set a fixed module scale (default 1) for the fillable styles (square, pinched-square, circle, diamond, heart, star, hashtag). Ignored when randomSize is true.

Summary by CodeRabbit

• New Features
  • Introduced a configurable size multiplier for data modules on fillable styles, adjustable between 0.75–1 for optimal scannability
  • Added an interactive size slider control to the demo interface for easier customization
  • Extended support for the pinched-square module style when using the randomSize option

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
reactqrcode-com	Ready	Preview, Comment	May 11, 2026 5:32pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 30dfed8c-c1e3-4ab6-a7f5-e9734371abbd

📥 Commits

Reviewing files that changed from the base of the PR and between 34b5a00 and e573a1e.

📒 Files selected for processing (9)

• .changeset/feat-data-modules-size.md
• apps/docs/public/llms-full.txt
• apps/docs/src/app/data-modules-settings/page.tsx
• apps/docs/src/components/demo/data-modules.tsx
• packages/react-qr-code/src/components/data-modules.tsx
• packages/react-qr-code/src/types/lib.ts
• packages/react-qr-code/src/utils/data-modules.test.ts
• packages/react-qr-code/src/utils/data-modules.ts
• packages/react-qr-code/src/utils/settings.ts

---

Walkthrough

This PR introduces a size property to DataModulesSettings that sets a fixed module size multiplier for fillable data module styles. The feature includes type definitions, settings sanitization, updated scale-factor logic, component integration, demo slider UI, and documentation updates.

Changes

Data Modules Size Multiplier Feature

Layer / File(s)	Summary
Type Definition and Settings Sanitization packages/react-qr-code/src/types/lib.ts, packages/react-qr-code/src/utils/settings.ts	DataModulesSettings adds optional size?: number property (fixed size multiplier, 0.75–1 recommended, fillable styles only, ignored when randomSize is true). sanitizeDataModulesSettings includes size field, defaulting to 1.
Scale Factor Utility Logic packages/react-qr-code/src/utils/data-modules.ts, packages/react-qr-code/src/utils/data-modules.test.ts	getScaleFactor now accepts optional size parameter and returns it for fillable styles when isRandom is false. Non-fillable styles and random mode always return 1. Tests verify fillable/non-fillable behavior and random precedence.
DataModules Component Integration packages/react-qr-code/src/components/data-modules.tsx	Component extracts size from sanitized settings and passes it to getScaleFactor. Also destructures gradient and gradientId props for conditional fill rendering.
Demo UI and Documentation apps/docs/src/components/demo/data-modules.tsx, apps/docs/src/app/data-modules-settings/page.tsx, apps/docs/public/llms-full.txt, .changeset/feat-data-modules-size.md	Demo adds Slider control for size with label showing current value; disables when randomSize is enabled. Documentation updated to include size property and expand randomSize compatible styles to include pinched-square. Changeset recorded for minor version bump.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• LGLabGreg/react-qr-code#68: Both modify DataModules component to accept and use gradientId prop for gradient rendering.
• LGLabGreg/react-qr-code#58: Both extend data-module style eligibility handling, including pinched-square support for random sizing.
• LGLabGreg/react-qr-code#529: Both modify DataModules component implementation, including scale-factor usage and rendering paths.

Poem

🐰 A slider glides, the modules dance,
Size multiplies with gentle chance—
From types to utils, round we go,
With fillable styles all aglow!
The randomness bows, the fixed size flows,
And documentation sweetly shows! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/module-size

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}