@manufosela/qr-code

QR code generator web component. Built with Lit.

Installation

npm install @manufosela/qr-code

Usage

import '@manufosela/qr-code';

<qr-code data="https://example.com"></qr-code>

Features

• Pure JavaScript QR generation (no external dependencies)
• Canvas-based rendering
• Customizable colors
• Multiple error correction levels
• Download as PNG
• Responsive sizing
• CSS custom properties for theming

Attributes

| Attribute | Type | Default | Description | | ------------------ | ------ | --------- | ------------------------------ | | data | String | '' | Text or URL to encode | | size | Number | 200 | QR code size in pixels | | error-correction | String | 'M' | Error correction level (L/M/Q/H) | | color | String | #000000 | Foreground (module) color | | background | String | #ffffff | Background color |

Methods

| Method | Description | | ----------------------- | ------------------------------------- | | toDataURL(type?) | Returns QR code as data URL | | download(filename?) | Downloads QR code as PNG image |

Error Correction Levels

| Level | Recovery Capacity | | ----- | ----------------- | | L | ~7% | | M | ~15% | | Q | ~25% | | H | ~30% |

Higher levels allow more damage/obstruction tolerance but result in denser QR codes.

Examples

Basic

<qr-code data="Hello World"></qr-code>

Custom Size

<qr-code data="Small QR" size="100"></qr-code>
<qr-code data="Large QR" size="400"></qr-code>

Custom Colors

<qr-code
  data="Styled QR"
  color="#3b82f6"
  background="#eff6ff">
</qr-code>

Dark Mode

<qr-code
  data="Dark Mode"
  color="#f8fafc"
  background="#1e293b">
</qr-code>

High Error Correction

<qr-code
  data="Resilient QR"
  error-correction="H">
</qr-code>

URL Encoding

<qr-code data="https://github.com/manufosela"></qr-code>

WiFi QR Code

<qr-code data="WIFI:T:WPA;S:NetworkName;P:password123;;"></qr-code>

Email QR Code

<qr-code data="mailto:[email protected]"></qr-code>

Phone QR Code

<qr-code data="tel:+1234567890"></qr-code>

Download QR Code

const qr = document.querySelector('qr-code');

// Download as PNG
qr.download('my-qrcode.png');

// Get as data URL
const dataUrl = qr.toDataURL();
console.log(dataUrl);

// Get as JPEG
const jpegUrl = qr.toDataURL('image/jpeg');

CSS Custom Properties

| Property | Default | Description | | ----------- | --------- | --------------------- | | --qr-size | 200px | QR code container size| | --qr-fg | #000 | Foreground color | | --qr-bg | #fff | Background color |

Styling Example

qr-code {
  --qr-size: 250px;
}

vCard Example

<qr-code data="BEGIN:VCARD
VERSION:3.0
N:Doe;John
FN:John Doe
ORG:Company Name
TEL:+1234567890
EMAIL:[email protected]
END:VCARD"></qr-code>

Compared to Original

| Feature | @nickmitchko/qr-code | @manufosela/qr-code | | ------- | -------------------- | ------------------- | | Lit version | Lit 2.x | Lit 3.x | | Dependencies | qrcode-generator | None (built-in) | | TypeScript | No | No | | Tests | No | Yes | | CSS Properties | Limited | Full theming | | Download | No | Yes | | Error Correction | Limited | All levels |

License

Apache-2.0