paymove QR Generator

A modern, lightweight QR code generator with TypeScript support, offering SVG, PNG, and JPG output formats with customizable styling options.

🚀 Installation

npm install @paymove-io/qr-generator

📖 Basic Usage

Simple QR Code Generation

import { generateStyledQR } from "@paymove-io/qr-generator";

// Generate SVG (default format)
const svg = await generateStyledQR({
  data: "https://example.com",
  size: 300,
});

// Generate PNG
const png = await generateStyledQR({
  data: "https://example.com",
  format: "png",
  size: 512,
});

// Generate JPG
const jpg = await generateStyledQR({
  data: "https://example.com",
  format: "jpg",
  size: 512,
});

⚙️ Configuration Options

| Option | Type | Default | Description | | -------------------- | ------------------------- | ------- | ------------------------------------------- | | data | string | - | Required - Content to encode in QR code | | size | number | 300 | Output image size in pixels | | format | "svg" \| "png" \| "jpg" | "svg" | Output format | | withAdditionalData | boolean | false | Paymove logo and copy |

🎨 Advanced Features

Error Correction Levels

The library supports four error correction levels for robust QR codes:

• L (Low): ~7% error correction
• M (Medium): ~15% error correction
• Q (Quartile): ~25% error correction
• H (High): ~30% error correction (default)

Format-Specific Options

SVG Output

• Vector-based, scalable format
• Perfect for web applications
• Smallest file size
• No quality loss on scaling

PNG Output

• High-quality bitmap format
• Lossless compression
• Ideal for printing and high-resolution displays
• Default quality: 95%

JPG Output

• Compressed bitmap format
• Smaller file sizes
• Good for web use
• Default quality: 95%

🔧 Technical Details

Dependencies

• QR Generation: qrcode-generator
• Build Tool: tsup
• Language: TypeScript

Cross-Platform Support

• Browser: Uses native Canvas API
• Node.js: Uses canvas package (optional dependency)

📱 Usage Examples

React/Next.js

import { useState } from "react";
import { generateStyledQR } from "@paymove-io/qr-generator";

function QRGenerator() {
  const [qrCode, setQrCode] = useState<string>("");

  const generateQR = async () => {
    try {
      const svg = await generateStyledQR({
        data: "https://paymove.io",
        size: 400,
        format: "svg",
      });
      setQrCode(svg as string);
    } catch (error) {
      console.error("Error generating QR:", error);
    }
  };

  return (
    <div>
      <button onClick={generateQR}>Generate QR Code</button>
      {qrCode && <div dangerouslySetInnerHTML={{ __html: qrCode }} />}
    </div>
  );
}

Node.js

import { generateStyledQR } from "@paymove-io/qr-generator";
import { writeFileSync } from "fs";

async function generateQRFile() {
  try {
    const pngBuffer = await generateStyledQR({
      data: "https://paymove.io",
      format: "png",
      size: 1024,
    });

    writeFileSync("qr-code.png", pngBuffer);
    console.log("QR code saved as qr-code.png");
  } catch (error) {
    console.error("Error:", error);
  }
}

Download QR Code in Browser

const downloadQR = async () => {
  try {
    const pngData = await generateStyledQR({
      data: "https://paymove.io",
      format: "png",
      size: 512,
    });

    // Create download link
    const blob = new Blob([pngData as string], { type: "image/png" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "qr-code.png";
    a.click();
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error("Error generating PNG:", error);
  }
};

🎯 Best Practices

For Web Applications

• Use SVG format for responsive designs
• Set appropriate size based on display context
• Consider error correction level for your use case

For High-Quality Output

• Use PNG format for printing
• Set size to 2-3x the intended display size
• Use H (High) error correction for maximum reliability

For File Size Optimization

• Use JPG format for web
• Consider reducing quality if acceptable
• Balance between size and readability

🔍 Error Handling

The library provides clear error messages for common issues:

try {
  const qr = await generateStyledQR({
    data: "", // Empty data will throw error
    size: 100,
  });
} catch (error) {
  // Error: "options.data must be a non-empty string"
  console.error(error.message);
}

📄 License

ISC

🤝 Contributing

This is a TypeScript-based project. Please ensure all contributions include proper typing and follow the existing code structure.

📚 API Reference

generateStyledQR(options: QRStyleOptions): Promise<string | Buffer>

Main function that generates a QR code based on the provided options.

Returns:

• string for SVG format
• Buffer for PNG/JPG formats in Node.js
• string (data URL) for PNG/JPG formats in browser

Throws:

• Error for invalid data
• Error for unsupported formats
• Error for invalid size parameters