interactive-qr-component

A beautiful, interactive QR code React component with tilt effects, glow animations, and customizable styling.

Features

• 🎨 Beautiful Design: Matches the exact style of the QR Bar App macOS application
• ✨ Interactive Effects: Tilt effects and glow animations on hover/touch
• 🎯 Customizable: Colors, themes, sizes, and effects can be customized
• 📱 Responsive: Works on both desktop and mobile devices
• 🚀 Lightweight: No external dependencies except qrcode
• 🔧 TypeScript: Full TypeScript support with type definitions

Installation

npm install interactive-qr-component

Usage

import React from 'react';
import { QRCode } from 'interactive-qr-component';

function App() {
  return (
    <QRCode
      url="https://example.com"
      width={300}
      height={300}
      allowTilt={true}
      allowGlowEffect={true}
      glowColor="#006bff"
      dotsColor="#000000"
      qrBackground="#ffffff"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | url | string | required | The URL to encode in the QR code | | width | number | 252 | Width of the QR code in pixels | | height | number | 252 | Height of the QR code in pixels | | size | number | 500 | Internal size for QR generation | | padding | number | 24 | Padding around the QR code | | allowTilt | boolean | true | Enable 3D tilt effect on hover | | allowGlowEffect | boolean | true | Enable glow effect on hover | | glowColor | string | '#006bff' | Color of the glow effect | | dotsColor | string | undefined | Color of the QR code dots | | qrBackground | string | undefined | Background color of the QR code | | enableShadow | boolean | false | Enable drop shadow | | errorCorrectionLevel | 'L' \| 'M' \| 'Q' \| 'H' | 'H' | QR code error correction level | | faviconUrl | string | undefined | URL of favicon to display in center | | className | string | undefined | Additional CSS class | | onLoad | () => void | undefined | Callback when QR code loads | | onError | (error: Error) => void | undefined | Callback when QR code generation fails |

Examples

Basic Usage

<QRCode url="https://example.com" />

Custom Styling

<QRCode
  url="https://example.com"
  width={400}
  height={400}
  dotsColor="#00ff00"
  qrBackground="#000000"
  glowColor="#ff00ff"
/>

Disable Effects

<QRCode
  url="https://example.com"
  allowTilt={false}
  allowGlowEffect={false}
/>

With Favicon

<QRCode
  url="https://example.com"
  faviconUrl="https://example.com/favicon.ico"
/>

Development

# Install dependencies
npm install

# Build the component
npm run build

# Watch for changes
npm run dev

# Type check
npm run type-check

License

MIT