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