@devmehq/react-qr-code

🎯 Simple & Advanced React component to generate QR codes with custom styling, multiple render formats, and image embedding support.



✨ Features

- 🎨 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

📦 Installation

``bash


Using npm

`tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function App() {
return
}
`

$3

`tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function StyledQRCode() {
return (
value="https://your-website.com"
size={300}
bgColor="#f3f4f6"
fgColor="#1f2937"
level="H"
marginSize={4}
style={{ borderRadius: '8px' }}
className="shadow-lg"
/>
)
}
`

$3

`tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function CanvasQRCode() {
return (
value="https://your-website.com"
renderAs="canvas"
size={256}
/>
)
}
`

$3

`tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function QRCodeWithLogo() {
return (
value="https://your-website.com"
size={256}
images={[
{
src: '/logo.png',
height: 50,
width: 50,
excavate: true,
},
]}
/>
)
}
`

📖 API Reference

$3

| 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 |

$3

| 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 |

$3

| Level | Error Correction | Data Capacity |
| ----- | ---------------- | ------------- |
| L | ~7% | High |
| M | ~15% | Medium |
| Q | ~25% | Medium-Low |
| H | ~30% | Low |

🎨 Styling & Customization

$3

`tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function ResponsiveQRCode() {
return (


`tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'

function DarkModeQRCode({ isDarkMode }) {
return (
value="https://your-website.com"
bgColor={isDarkMode ? '#1f2937' : '#ffffff'}
fgColor={isDarkMode ? '#f3f4f6' : '#000000'}
/>
)
}
`

$3

`tsx
import React from 'react'
import { ReactQrCode } from '@devmehq/react-qr-code'
import './styles.css'

function CustomStyledQRCode() {
return (
value="https://your-website.com"
className="qr-code-custom"
size={300}
/>
)
}
`

`css
/ styles.css /
.qr-code-custom {
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
`

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.

💡 Use Cases

$3

`tsx
function WiFiQRCode({ ssid, password, security = 'WPA' }) {
const wifiString = WIFI:T:${security};S:${ssid};P:${password};;

return
}
`

$3

`tsx
function ContactQRCode({ name, phone, email }) {
const vCard = BEGIN:VCARD
VERSION:3.0
FN:${name}
TEL:${phone}
EMAIL:${email}
END:VCARD

return
}
`

$3

`tsx
function TwoFactorQRCode({ secret, issuer, accountName }) {
const otpauth = otpauth://totp/${issuer}:${accountName}?secret=${secret}&issuer=${issuer}

return (
value={otpauth}
size={256}
level="H"
images={[
{
src: '/logo.png',
height: 40,
width: 40,
excavate: true,
},
]}
/>
)
}
`

$3

`tsx
function PaymentQRCode({ amount, recipient, currency = 'USD' }) {
const paymentLink = https://pay.example.com/?to=${recipient}&amount=${amount}¤cy=${currency}

return
}
`

🧪 Testing

`bash


Run tests

`bash


Install dependencies

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

📝 Roadmap

- [ ] 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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

- 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

📧 Support

For support, email support@dev.me or open an issue on GitHub.

---