QR Generator Library

Librería React para generar códigos QR personalizables con soporte para logos y múltiples formatos de exportación.

Instalación

npm install @tu-usuario/qr-generator
# o
pnpm install @tu-usuario/qr-generator
# o
yarn add @tu-usuario/qr-generator

Uso

Componente React

import { QRCodeGenerator } from '@tu-usuario/qr-generator'

function App() {
  return (
    <QRCodeGenerator
      url="https://example.com"
      logoPath="/logo.png"
      size={400}
      qrColor="#000000"
      bgColor="#ffffff"
      showDownloadButton={true}
      showCopyButton={true}
    />
  )
}

Hook personalizado

import { useQRGenerator } from '@tu-usuario/qr-generator'

function CustomQR() {
  const {
    containerRef,
    generateQR,
    downloadQR,
    exportAs,
    copyToClipboard,
    getBase64,
    loading,
    error,
    qrGenerated
  } = useQRGenerator({
    url: 'https://example.com',
    logoPath: '/logo.png',
    size: 400,
    autoGenerate: true,
    validateUrl: true,
    callbacks: {
      onGenerate: (canvas) => console.log('QR generado!'),
      onError: (error) => console.error('Error:', error)
    }
  })

  return (
    <div>
      <div ref={containerRef} />
      {qrGenerated && (
        <div>
          <button onClick={() => downloadQR()}>Descargar</button>
          <button onClick={() => copyToClipboard()}>Copiar</button>
          <button onClick={async () => {
            const base64 = getBase64('png')
            console.log(base64)
          }}>
            Obtener Base64
          </button>
        </div>
      )}
    </div>
  )
}

Características

• ✅ Generación de códigos QR personalizables
• ✅ Soporte para logos/imágenes centrales
• ✅ Múltiples formatos de exportación (PNG, JPEG, Base64, Blob)
• ✅ Validación automática de URLs
• ✅ Callbacks para eventos
• ✅ Componente React listo para usar
• ✅ Hook personalizable
• ✅ TypeScript completo
• ✅ Copiar al portapapeles

API

Props de QRCodeGenerator

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | url | string | - | URL para el código QR (requerido) | | logoPath | string | - | Ruta del logo a mostrar en el centro | | size | number | 400 | Tamaño del QR en píxeles | | logoSize | number | 20 | Tamaño del logo en porcentaje | | qrColor | string | #000000 | Color de los módulos del QR | | bgColor | string | #ffffff | Color de fondo | | errorLevel | 'L' \| 'M' \| 'Q' \| 'H' | 'H' | Nivel de corrección de errores | | padding | number | 8 | Padding alrededor del logo | | autoGenerate | boolean | true | Generar automáticamente al montar | | validateUrl | boolean | true | Validar URL antes de generar | | showDownloadButton | boolean | true | Mostrar botón de descarga | | showCopyButton | boolean | true | Mostrar botón de copiar | | callbacks | QRCallbacks | - | Callbacks para eventos |

Callbacks

interface QRCallbacks {
  onGenerate?: (canvas: HTMLCanvasElement) => void
  onError?: (error: Error) => void
  onLoadStart?: () => void
  onLoadEnd?: () => void
  onValidationError?: (error: string) => void
}

Licencia

MIT