@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

# Using npm
npm install @devmehq/react-qr-code

# Using yarn
yarn add @devmehq/react-qr-code

# Using pnpm
pnpm add @devmehq/react-qr-code

🚀 Quick Start

Basic Usage

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

function App() {
  return <ReactQrCode value="https://github.com/devmehq/react-qr-code" />
}

With Custom Styling

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

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

Canvas Rendering

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

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

With Logo/Image

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

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

📖 API Reference

ReactQrCode Props

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

ReactQrCodeImageProps

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

Error Correction Levels

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

🎨 Styling & Customization

Responsive Design

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

function ResponsiveQRCode() {
  return (
    <div style={{ width: '100%', maxWidth: '400px' }}>
      <ReactQrCode
        value="https://your-website.com"
        size={256}
        style={{ width: '100%', height: 'auto' }}
      />
    </div>
  )
}

Dark Mode Support

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

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

Custom CSS Classes

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

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

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

WiFi Password Sharing

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

  return <ReactQrCode value={wifiString} size={256} level="H" />
}

Contact Information (vCard)

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

  return <ReactQrCode value={vCard} size={256} level="M" />
}

Two-Factor Authentication

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

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

Payment Links

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

  return <ReactQrCode value={paymentLink} size={300} level="H" marginSize={4} />
}

🧪 Testing

# Run tests
yarn test

# Run tests in watch mode
yarn test:watch

# Generate coverage report
yarn test:coverage

🔧 Development

# Install dependencies
yarn install

# Build the library
yarn build

# Run linting
yarn lint-js

# Format code
yarn prettier

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

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 [email protected] or open an issue on GitHub.

---

Made with ❤️ by DEV.ME