Advanced: Quick vs. Advanced UI Modes
Relevant source files
The following files were used as context for generating this wiki page:The QR Generator Pro application offers two distinct user interface modes: "Quick" (🚀 Nhanh) and "Pro" (⚡ Chuyên sâu). This dual-mode system is designed to cater to different user needs, providing a simplified experience for beginners and a comprehensive set of tools for advanced users. The "Quick" mode prioritizes speed and ease of use, while the "Pro" mode exposes detailed customization options for fine-grained control over the final QR code output.
This design choice allows the application to be approachable for users who need to generate a standard QR code quickly, without being overwhelmed by technical options. Simultaneously, it empowers designers, developers, and power users who require specific configurations for printing, branding, or ensuring scannability in challenging conditions. The UI mode is a client-side setting and does not alter the core data generation logic, but rather controls which customization parameters are visible and configurable by the user.
Sources: README.md:29-30, src/App.jsx:352-355, 804-822
UI Mode State Management
The active UI mode is managed by a React state variable uiMode within the main App component. This state is initialized from and persisted to the browser's localStorage using the custom useLocalStorage hook, ensuring the user's preferred mode is remembered across sessions.
The state is toggled between 'quick' and 'pro' via a button group in the customization panel.
Sources: src/App.jsx:242-256, 352, 804-822
State Persistence and Flow
The following diagram illustrates how the uiMode state is initialized, updated, and persisted.
This diagram shows the lifecycle of the uiMode state, from initial load to user interaction and persistence.
Sources: src/App.jsx:242-256, 352, 810-813
Feature Comparison
The primary difference between the two modes is the set of customization options available to the user. The "Pro" mode unlocks a significant number of advanced controls that are hidden in "Quick" mode.
| Feature | Quick Mode (quick) | Pro Mode (pro) |
|---|---|---|
| Image Size | Preset buttons and a simple slider (192-4096px). | Presets, a number input (96-8192px), and a slider for fine-tuning. |
| ECC Level | Not available (defaults to AUTO). | Full selection: AUTO, L, M, Q, H. |
| Colors | Not available (defaults to black on white). | Color pickers and hex inputs for both foreground and background. |
| Quiet Zone | Not available (defaults to true). | Checkbox to include/exclude the white border. |
| Transparent BG | Not available (defaults to false). | Checkbox to enable transparent background for PNG exports. |
| Export Format | Not available (defaults to canvas unless a preset specifies svg). | Button group to select PNG/JPG (canvas) or SVG. |
| Logo | Not available. | File input to upload a logo. |
| Logo Sizing | Not available. | Presets (S, M, L) and a custom slider for precise logo scaling. |
Sources: src/App.jsx:1005-1317
Conditional Rendering Architecture
The application uses the uiMode state to conditionally render JSX elements. This is a clean and efficient way to toggle large sections of the UI without complex logic. The main customization panel contains two distinct blocks, one for each mode.
This diagram shows the rendering logic based on the uiMode state.
Sources: src/App.jsx:1005-1006, 1046-1047
Code Example: Mode-Based Rendering
The following snippet from App.jsx demonstrates the conditional rendering check that separates the UI controls for each mode.
// src/App.jsx:1005-1317
{uiMode === 'quick' && (
<div className="space-y-2">
{/* ... Quick mode size controls ... */}
</div>
)}
{uiMode === 'pro' && (
<>
<div className="space-y-2">
{/* ... Pro mode size controls ... */}
</div>
<div className="space-y-2" role="group" aria-labelledby="ecc-label">
{/* ... Pro mode ECC controls ... */}
</div>
{/* ... Other Pro mode controls for colors, format, logo, etc. ... */}
</>
)}
This code clearly separates the UI components, making the feature easy to maintain and extend.
Sources: src/App.jsx:1005-1317
Impact on QR Code Generation
While the UI differs significantly between modes, the underlying QR code generation is unified. Both modes ultimately configure a single set of properties (qrProps) that are passed to the qrcode.react library for rendering.
- Quick Mode: Provides a simplified path to configure a subset of
qrProps. For example,eccModeis implicitly'AUTO', and colors are fixed. - Pro Mode: Allows direct manipulation of nearly all values that construct
qrProps, includinglevel(derived fromeccModeand logo size viapickECC),fgColor,bgColor, andimageSettingsfor the logo.
The choice of UI mode is purely a user-experience enhancement to control the complexity of the interface. The final QR code is always a result of the same rendering pipeline, which is visible in the QrPreview component.
Sources: src/App.jsx:508-527, src/components/QrPreview.jsx:8-13, src/utils/qr-helpers.js:236-243
Summary
The Quick vs. Pro UI mode system is a key architectural feature of the QR Generator Pro application. It effectively serves two distinct user groups by abstracting away complexity for casual users while providing deep customization for advanced users. This is achieved through simple, maintainable conditional rendering based on a persisted state variable (uiMode), without duplicating core QR code generation logic. This approach enhances usability and broadens the application's appeal.
Sources: README.md:29-30, src/App.jsx:804-822