qr-custom-generator v1.1.0

qr-custom-generator

A customizable QR code generator library that supports multiple output formats including PNG, JPG, WEBP, and SVG.

Installation

npm install qr-custom-generator

Features

• Multiple output formats (PNG, JPG, WEBP, SVG)
• Customizable colors and size
• File output support
• React hook included
• TypeScript support

Usage

Node.js

import { generateQR } from 'qr-custom-generator';

// Generate and save a QR code to a file
const generateQRCode = async () => {
  try {
    // PNG format (default)
    const pngResult = await generateQR('https://example.com', {
      color: '#000000',      // QR code color (default: #000000)
      background: '#ffffff',  // Background color (default: #ffffff)
      size: 300,             // Size in pixels (default: 300)
      margin: 4,             // Margin in modules (default: 4)
      format: 'png',         // Output format: 'png', 'jpg', 'webp', or 'svg' (default: 'png')
      output: 'qrcode.png'   // Output file path (optional)
    });
    console.log('PNG QR Code generated:', pngResult);

    // JPEG format
    const jpgResult = await generateQR('https://example.com', {
      format: 'jpg',
      output: 'qrcode.jpg'
    });
    console.log('JPEG QR Code generated:', jpgResult);

    // WEBP format
    const webpResult = await generateQR('https://example.com', {
      format: 'webp',
      output: 'qrcode.webp'
    });
    console.log('WEBP QR Code generated:', webpResult);

    // SVG format
    const svgResult = await generateQR('https://example.com', {
      format: 'svg'
    });
    console.log('SVG QR Code generated:', svgResult);
  } catch (error) {
    console.error('Error:', error);
  }
};

React

import { useQRCode } from 'qr-custom-generator';

function QRCodeComponent() {
  const { qrCode, error, loading } = useQRCode('https://example.com', {
    color: '#000000',
    background: '#ffffff',
    size: 300,
    margin: 4,
    format: 'png' // Can be 'png', 'jpg', 'webp', or 'svg'
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {qrCode && (
        format === 'svg' ? (
          <div dangerouslySetInnerHTML={{ __html: qrCode }} />
        ) : (
          <img src={qrCode} alt="QR Code" />
        )
      )}
    </div>
  );
}

API Reference

generateQR(text: string, options?: QROptions): Promise<QRResult>

Generates a QR code with the provided text and options.

Options

interface QROptions {
  color?: string;      // QR code color (default: '#000000')
  background?: string; // Background color (default: '#ffffff')
  size?: number;       // Size in pixels (default: 300)
  margin?: number;     // Margin in modules (default: 4)
  format?: 'png' | 'jpg' | 'webp' | 'svg'; // Output format (default: 'png')
  output?: string;     // Output file path (optional)
}

Return Value

interface QRResult {
  data: string; // File path when output option is provided, otherwise data URL or SVG string
  format: 'png' | 'jpg' | 'webp' | 'svg';
}

useQRCode(text: string, options?: Omit<QROptions, 'output'>)

React hook for generating QR codes in React components.

Return Value

{
  qrCode: string | null; // Data URL or SVG string
  error: Error | null;    // Error object if generation fails
  loading: boolean;       // Loading state
}

License

MIT