🎯 Simple & Advanced React component to generate QR codes with custom styling, multiple render formats, and image embedding support.
- 🎨 Customizable: Colors, sizes, margins, and styles
- 🖼️ Multiple Formats: Render as SVG or Canvas
- 📱 Responsive: Scales perfectly on all devices
- 🏞️ Image Embedding: Add logos or images to QR codes
- 🛡️ Error Correction: Four levels (L, M, Q, H)
- 📦 Lightweight: Zero dependencies, small bundle size
- 🔧 TypeScript: Full TypeScript support
- ⚡ Performance: Optimized rendering with React hooks
# Using npm
npm install @devmehq/react-qr-code
# Using yarn
yarn add @devmehq/react-qr-code
# Using pnpm
pnpm add @devmehq/react-qr-codeimportReactfrom'react'import{ReactQrCode}from'@devmehq/react-qr-code'functionApp(){return<ReactQrCodevalue="https://github.com/devmehq/react-qr-code"/>}importReactfrom'react'import{ReactQrCode}from'@devmehq/react-qr-code'functionStyledQRCode(){return(<ReactQrCodevalue="https://your-website.com"size={300}bgColor="#f3f4f6"fgColor="#1f2937"level="H"marginSize={4}style={{borderRadius: '8px'}}className="shadow-lg"/>)}importReactfrom'react'import{ReactQrCode}from'@devmehq/react-qr-code'functionCanvasQRCode(){return(<ReactQrCodevalue="https://your-website.com"renderAs="canvas"size={256}/>)}importReactfrom'react'import{ReactQrCode}from'@devmehq/react-qr-code'functionQRCodeWithLogo(){return(<ReactQrCodevalue="https://your-website.com"size={256}images={[{src: '/logo.png',height: 50,width: 50,excavate: true,},]}/>)}| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Required | The value to encode in the QR code |
renderAs | 'svg' | 'canvas' | 'svg' | Render format (SVG or Canvas) |
size | number | 256 | Size of the QR code in pixels |
bgColor | string | '#ffffff' | Background color (CSS color value) |
fgColor | string | '#000000' | Foreground color (CSS color value) |
level | 'L' | 'M' | 'Q' | 'H' | 'L' | Error correction level |
marginSize | number | 0 | Margin around the QR code in pixels |
style | CSSProperties | undefined | React style object |
className | string | undefined | CSS class name |
title | string | undefined | Title for SVG accessibility |
id | string | undefined | HTML id attribute |
images | ReactQrCodeImageProps[] | undefined | Array of images to embed in the QR code |
| Property | Type | Default | Description |
|---|---|---|---|
src | string | Required | Image source URL |
x | number | Auto-centered | X position of the image |
y | number | Auto-centered | Y position of the image |
height | number | 10% of QR size | Height of the image |
width | number | 10% of QR size | Width of the image |
excavate | boolean | false | Whether to clear QR modules behind the image |
| Level | Error Correction | Data Capacity |
|---|---|---|
L | ~7% | High |
M | ~15% | Medium |
Q | ~25% | Medium-Low |
H | ~30% | Low |
importReactfrom'react'import{ReactQrCode}from'@devmehq/react-qr-code'functionResponsiveQRCode(){return(<divstyle={{width: '100%',maxWidth: '400px'}}><ReactQrCodevalue="https://your-website.com"size={256}style={{width: '100%',height: 'auto'}}/></div>)}importReactfrom'react'import{ReactQrCode}from'@devmehq/react-qr-code'functionDarkModeQRCode({ isDarkMode }){return(<ReactQrCodevalue="https://your-website.com"bgColor={isDarkMode ? '#1f2937' : '#ffffff'}fgColor={isDarkMode ? '#f3f4f6' : '#000000'}/>)}importReactfrom'react'import{ReactQrCode}from'@devmehq/react-qr-code'import'./styles.css'functionCustomStyledQRCode(){return(<ReactQrCodevalue="https://your-website.com"className="qr-code-custom"size={300}/>)}/* styles.css */
.qr-code-custom {
border-radius:16px;
box-shadow:04px6pxrgba(0,0,0,0.1);
padding:16px;
background:linear-gradient(135deg,#667eea0%,#764ba2100%);
}Note: When using renderAs="canvas" on high-density displays, the canvas is scaled for pixel-perfect rendering. Custom styles are merged with internal scaling styles.
functionWiFiQRCode({ ssid, password, security ='WPA'}){constwifiString=`WIFI:T:${security};S:${ssid};P:${password};;`return<ReactQrCodevalue={wifiString}size={256}level="H"/>}functionContactQRCode({ name, phone, email }){constvCard=`BEGIN:VCARDVERSION:3.0FN:${name}TEL:${phone}EMAIL:${email}END:VCARD`return<ReactQrCodevalue={vCard}size={256}level="M"/>}functionTwoFactorQRCode({ secret, issuer, accountName }){constotpauth=`otpauth://totp/${issuer}:${accountName}?secret=${secret}&issuer=${issuer}`return(<ReactQrCodevalue={otpauth}size={256}level="H"images={[{src: '/logo.png',height: 40,width: 40,excavate: true,},]}/>)}functionPaymentQRCode({ amount, recipient, currency ='USD'}){constpaymentLink=`https://pay.example.com/?to=${recipient}&amount=${amount}¤cy=${currency}`return<ReactQrCodevalue={paymentLink}size={300}level="H"marginSize={4}/>}
# Run tests
yarn test# Run tests in watch mode
yarn test:watch
# Generate coverage report
yarn test:coverage# Install dependencies
yarn install
# Build the library
yarn build
# Run linting
yarn lint-js
# Format code
yarn prettierContributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Download QR code as image (PNG/JPEG/SVG)
- Share QR code functionality
- Server-side rendering (SSR) support
- Corner dot customization
- Gradient color support
- Custom shape modules (dots, rounded, etc.)
- Animation support
- Batch QR code generation
- QR code scanner component
This project is licensed under the MIT License - see the LICENSE file for details.
- QR Code is a registered trademark of DENSO WAVE INCORPORATED
- Built with ❤️ by the DEV.ME team
- Inspired by the QR code specification and community feedback
For support, email support@dev.me or open an issue on GitHub.
Made with ❤️ by DEV.ME