+ + +
+

๐Ÿ“– Overview

+

React QR Code provides two main components:

+
    +
  • ReactQrCode - Basic QR code component with essential features
    • +
  • AdvancedQRCode - Advanced component with 100+ customization options
    • +
+ +

Import

+
+ 
// Basic component
+import { ReactQrCode } from '@devmehq/react-qr-code';
+
+// Advanced component with themes and helpers
+import { 
+  AdvancedQRCode, 
+  QRHelpers, 
+  PRESET_THEMES 
+} from '@devmehq/react-qr-code';
+
+
+ + +
+

โš™๏ธ ReactQrCode Props

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropTypeDefaultDescription
value *string | QRDataType-The data to encode in the QR code
sizenumber256Size of the QR code in pixels
bgColorstring'#ffffff'Background color (hex, rgb, etc.)
fgColorstring'#000000'Foreground color (hex, rgb, etc.)
level'L' | 'M' | 'Q' | 'H''L'Error correction level
renderAs'svg' | 'canvas''svg'Render method
includeMarginbooleantrueInclude margin in the QR code
imageSettingsImageSettingsundefinedLogo/image configuration
+
+ +

ImageSettings Interface

+
+ 
interface ImageSettings {
+  src: string;           // Image URL or data URI
+  width?: number;        // Image width (default: 60)
+  height?: number;       // Image height (default: 60)
+  x?: number;           // X position (default: center)
+  y?: number;           // Y position (default: center)
+  opacity?: number;     // Image opacity 0-1 (default: 1)
+  excavate?: boolean;   // Remove QR modules behind image (default: false)
+}
+
+ +

Basic Example

+
+ 
<ReactQrCode 
+  value="https://example.com"
+  size={200}
+  bgColor="#f0f0f0"
+  fgColor="#333333"
+  level="M"
+  imageSettings={{
+    src: "/logo.png",
+    width: 30,
+    height: 30,
+    excavate: true
+  }}
+/>
+
+ +
+ +
+
+ + +
+

๐ŸŽจ AdvancedQRCode Props

+

All ReactQrCode props plus:

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropTypeDefaultDescription
theme'modern' | 'neon' | 'vintage' | 'cyberpunk' | 'nature'undefinedPreset theme
advancedStyleAdvancedQRStyleOptionsundefinedAdvanced customization options
animatedbooleanfalseEnable fade-in animation
animationDurationnumber300Animation duration in ms
+
+ +

AdvancedQRStyleOptions

+
+ 
interface AdvancedQRStyleOptions {
+  eyes?: {
+    frameShape?: 'square' | 'circle' | 'rounded' | 'leaf' | 'star' | 'diamond' | 'flower' | 'heart' | 'octagon' | 'hexagon' | 'cross' | 'gear';
+    frameColor?: string | GradientConfig;
+    frameEffect?: 'none' | 'shadow' | 'glow' | 'inner-shadow' | 'blur' | '3d' | 'emboss' | 'neon' | 'metallic' | 'glass' | 'chrome' | 'holographic';
+    pupilShape?: 'square' | 'circle' | 'rounded' | 'leaf' | 'star' | 'diamond' | 'flower' | 'heart' | 'octagon' | 'hexagon' | 'cross' | 'gear';
+    pupilColor?: string | GradientConfig;
+    pupilEffect?: ColorEffect;
+    // Position-specific customization
+    topLeft?: Partial<SingleEyeConfig>;
+    topRight?: Partial<SingleEyeConfig>;
+    bottomLeft?: Partial<SingleEyeConfig>;
+  };
+  body?: {
+    shape?: 'square' | 'circle' | 'rounded' | 'diamond' | 'star' | 'dot' | 'line-vertical' | 'line-horizontal' | 'plus' | 'cross' | 'zigzag' | 'wave' | 'fluid' | 'hexagon' | 'octagon' | 'triangle' | 'mosaic' | 'pixel' | 'bubble';
+    color?: string | GradientConfig;
+    effect?: ColorEffect;
+    pattern?: BodyPattern;
+    density?: number;    // 0-1
+    gap?: number;        // Gap between modules
+    roundness?: number;  // Corner radius
+    rotation?: number;   // Rotation angle
+  };
+  background?: {
+    pattern?: 'none' | 'dots' | 'lines' | 'grid' | 'waves' | 'zigzag' | 'checkerboard' | 'diagonal' | 'triangles' | 'hexagons' | 'circles' | 'stars' | 'noise';
+    patternColor?: string | GradientConfig;
+    patternOpacity?: number;
+    primaryColor?: string | GradientConfig;
+    image?: BackgroundImage;
+    border?: BorderConfig;
+    effects?: BackgroundEffect[];
+    rounded?: boolean | number;
+  };
+  effects?: {
+    global?: ColorEffect;
+    glow?: GlowConfig;
+    shadow?: ShadowConfig;
+    // ... more effects
+  };
+}
+
+ +

Gradient Configuration

+
+ 
interface GradientConfig {
+  type: 'linear' | 'radial' | 'conic';
+  colors: Array<{
+    color: string;
+    offset: number; // 0-1
+    opacity?: number;
+  }>;
+  angle?: number;           // For linear gradients
+  center?: { x: number; y: number }; // For radial/conic
+}
+
+
+ + +
+

๐ŸŽญ Preset Themes

+ +
+
+

Modern Theme

+
+ 
<AdvancedQRCode 
+  value="Modern theme"
+  size={180}
+  theme="modern"
+/>
+
+
+
+ +
+

Neon Theme

+
+ 
<AdvancedQRCode 
+  value="Neon theme"
+  size={180}
+  theme="neon"
+/>
+
+
+
+
+ +
+
+

Cyberpunk Theme

+
+ 
<AdvancedQRCode 
+  value="Cyberpunk theme"
+  size={180}
+  theme="cyberpunk"
+/>
+
+
+
+ +
+

Nature Theme

+
+ 
<AdvancedQRCode 
+  value="Nature theme"
+  size={180}
+  theme="nature"
+/>
+
+
+
+
+
+ + +
+

๐Ÿ“ฑ Data Helpers (QRHelpers)

+ +

WiFi QR Code

+
+ 
QRHelpers.wifi(
+  ssid: string,           // Network name
+  password?: string,      // Network password
+  security?: 'WEP' | 'WPA' | 'WPA2' | 'nopass',
+  hidden?: boolean        // Hidden network
+)
+
+ +

Contact vCard

+
+ 
QRHelpers.vcard({
+  firstName?: string,
+  lastName?: string,
+  organization?: string,
+  phone?: string,
+  email?: string,
+  url?: string,
+  address?: string
+})
+
+ +

Other Data Types

+
+ 
// SMS Message
+QRHelpers.sms(phone: string, message?: string)
+
+// Email
+QRHelpers.email(to: string, subject?: string, body?: string)
+
+// Geographic Location
+QRHelpers.geo(latitude: number, longitude: number, altitude?: number)
+
+// Calendar Event
+QRHelpers.event({
+  summary: string,
+  startDate: Date,
+  endDate?: Date,
+  location?: string,
+  description?: string
+})
+
+// Phone Number
+QRHelpers.phone(number: string)
+
+// Plain Text
+QRHelpers.text(text: string)
+
+// URL
+QRHelpers.url(url: string)
+
+
+ + +
+

๐Ÿ”ง Component Methods

+

Access methods using React refs:

+ +
+ 
const qrRef = useRef<QRCodeRef>(null);
+
+// Download QR code as image
+await qrRef.current?.download();
+
+// Copy QR code to clipboard
+await qrRef.current?.copy();
+
+// Get data URL
+const dataUrl = await qrRef.current?.getDataURL();
+
+// Get SVG string
+const svgString = qrRef.current?.getSVGString();
+
+ +

Method Definitions

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturn TypeDescription
download()Promise<void>Download QR code as PNG image
copy()Promise<void>Copy QR code to clipboard
getDataURL()Promise<string>Get QR code as data URL
getSVGString()stringGet QR code as SVG string
+
+
+ + +
+

๐Ÿ’ก Complete Examples

+ +

Complex Custom QR Code

+
+ 
<AdvancedQRCode 
+  value="https://example.com"
+  size={300}
+  level="H"
+  advancedStyle={{
+    eyes: {
+      frameShape: 'flower',
+      frameColor: {
+        type: 'linear',
+        colors: [
+          { color: '#667eea', offset: 0 },
+          { color: '#764ba2', offset: 1 }
+        ],
+        angle: 45
+      },
+      pupilShape: 'star',
+      pupilColor: '#ffffff',
+      frameEffect: 'glow'
+    },
+    body: {
+      shape: 'hexagon',
+      color: {
+        type: 'radial',
+        colors: [
+          { color: '#667eea', offset: 0 },
+          { color: '#764ba2', offset: 1 }
+        ],
+        center: { x: 50, y: 50 }
+      },
+      effect: 'holographic',
+      density: 0.9
+    },
+    background: {
+      pattern: 'grid',
+      patternColor: '#e0e0e0',
+      patternOpacity: 0.1,
+      border: {
+        width: 4,
+        color: '#667eea',
+        style: 'solid',
+        radius: 16
+      }
+    }
+  }}
+  animated={true}
+  animationDuration={800}
+  imageSettings={{
+    src: '/logo.png',
+    width: 40,
+    height: 40,
+    excavate: true
+  }}
+/>
+
+ +
+ +
+ +

With Ref and Methods

+
+ 
import React, { useRef } from 'react';
+import { ReactQrCode, QRCodeRef } from '@devmehq/react-qr-code';
+
+function MyComponent() {
+  const qrRef = useRef<QRCodeRef>(null);
+
+  const handleDownload = async () => {
+    await qrRef.current?.download();
+  };
+
+  return (
+    <div>
+      <ReactQrCode 
+        ref={qrRef}
+        value="Download me!"
+        size={200}
+      />
+      <button onClick={handleDownload}>
+        Download QR Code
+      </button>
+    </div>
+  );
+}
+
+
+ +