zpao/qrcode.react
Qrcode.react
This project is a React component library for generating and rendering customizable QR codes. It provides tools to produce QR codes as either scalable vector graphics or via an HTML5 canvas.
The library enables branded QR code design by allowing the embedding of custom logos or images into the center of the code. It supports a range of visual customizations, including the adjustment of dimensions, foreground and background colors, and margin thickness.
The toolset covers the programmatic control of error correction levels to maintain scannability when using overlays. It also includes capabilities for client-side image export, allowing rendered QR codes to be converted into downloadable image files directly in the browser.
Features
- QR Code Generators - Provides a React library for generating and rendering scannable QR codes using SVG or Canvas.
- Programmatic QR Generation - Provides programmatic control over QR code size, colors, and margins to match specific user interfaces.
- Branded QR Codes - Enables the creation of branded QR codes by embedding custom logos or images in the center.
- QR Code Error Correction Level Selectors - Provides programmatic control over QR error correction levels to ensure scannability when logos are overlaid.
- QR Code Visual Options - Modifies visual style via adjustments to size, foreground/background colors, and margin thickness.
- QR Code Components - Ships a React component for generating and rendering QR codes as SVG or Canvas elements.
- Image Base64 Encoding - Converts rendered QR codes into base64-encoded data URI strings for client-side downloads.
- QR Code Exports - Extracts rendered QR code data as image files for client-side downloads.
- Canvas Rendering - Implements direct pixel manipulation on an HTML5 canvas to render QR codes and center logos.
- SVG-Based Vector Rendering - Generates scalable vector graphics (SVG) to ensure high-fidelity rendering at any size.
- Image Layer Compositing - Renders the QR base and center logos as separate layers to manage opacity and background excavation.
- Canvas-Based Generators - Renders QR codes onto an HTML5 canvas for high-performance display and image export.
- SVG Vector Generation - Produces scalable vector graphics for QR codes with customizable colors and dimensions.
- Client-Side Image Generation - Converts rendered QR codes into downloadable image files entirely within the user's browser.
- Specialized Components - QR component for use with React
- UI Components - QR code generation component.
