Relevant source files

The following files were used as context for generating this wiki page: - [src/components/QrPreview.jsx](https://github.com/vophuthinh/QR-Tool/blob/main/src/components/QrPreview.jsx) - [src/App.jsx](https://github.com/vophuthinh/QR-Tool/blob/main/src/App.jsx) - [src/components/ExportPanel.jsx](https://github.com/vophuthinh/QR-Tool/blob/main/src/components/ExportPanel.jsx) - [package.json](https://github.com/vophuthinh/QR-Tool/blob/main/package.json) - [src/utils/qr-helpers.js](https://github.com/vophuthinh/QR-Tool/blob/main/src/utils/qr-helpers.js) - [README.md](https://github.com/vophuthinh/QR-Tool/blob/main/README.md)

# Component: QrPreview.jsx The `QrPreview.jsx` component is a crucial part of the QR-Tool's user interface, responsible for rendering the visual representation of the generated QR code. It is a presentational component that receives all necessary data and configuration from its parent, `App.jsx`. Its primary functions are to display the QR code using either Canvas or SVG formats, provide visual feedback on the output dimensions, and handle drag-and-drop events for logo uploads. The component is optimized for performance using `React.memo` to prevent re-renders when its props have not changed. It also prioritizes accessibility by generating a descriptive `aria-label` for the QR code image. Sources: [src/components/QrPreview.jsx:1-83](), [src/App.jsx:921-928]() ## Architecture and Data Flow The `QrPreview` component is instantiated within the main `App.jsx` component. It receives its state and event handlers as props, making it a controlled component. The data flow is unidirectional, originating from the state managed in `App.jsx`. This diagram illustrates the flow of props from the parent `App` component to `QrPreview` and its internal rendering components. ```mermaid graph TD subgraph App.jsx A[State: qrProps, format, qrContent] --> B(QrPreview Component); C[Handler: handleDrop] --> B; end subgraph QrPreview.jsx B --> D{isCanvas?}; D -- Yes --> E[QRCodeCanvas]; D -- No --> F[QRCodeSVG]; B --> G[DOM Wrapper with onDrop]; B --> H[ARIA Label Generation]; end subgraph qrcode.react E -- Receives qrProps --> I[