{"_id":"@afkarbase/qr","name":"@afkarbase/qr","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@afkarbase/qr","version":"1.0.0","description":"A modern, zero-dependency TypeScript QR code generator that works everywhere JavaScript runs","type":"module","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}}},"scripts":{"dev":"rollup -c --watch","build":"npm run clean && npm run build:types && npm run build:rollup","build:types":"tsc --emitDeclarationOnly --outDir dist/types --noEmit false","build:rollup":"rollup -c","clean":"rimraf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","format":"prettier --write src/**/*.{ts,tsx}","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","test:browser":"vitest run --browser","test:playground":"playwright test","test:playground:ui":"playwright test --ui","test:playground:debug":"playwright test --debug","analyze":"rollup-plugin-visualizer dist/stats.html && open dist/stats.html","prepublishOnly":"npm run build && npm run test","examples:playground":"npx http-server -p 3000 -c-1","examples:node":"cd examples/node && npm run start","examples:server":"cd examples/node && npm run server","examples:cli":"cd examples/node && npm run cli","examples:batch":"cd examples/node && npm run batch","examples:install":"cd examples/node && npm install"},"keywords":["qr","qrcode","qr-code","generator","typescript","zero-dependency","framework-agnostic","svg","canvas","browser","nodejs"],"author":{"name":"afkarbase"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/afkarbase/qr.git"},"bugs":{"url":"https://github.com/afkarbase/qr/issues"},"homepage":"https://github.com/afkarbase/qr#readme","devDependencies":{"@playwright/test":"^1.55.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.5","@typescript-eslint/eslint-plugin":"^6.14.0","@typescript-eslint/parser":"^6.14.0","@vitest/coverage-v8":"^1.0.4","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.0.1","jsdom":"^28.0.0","prettier":"^3.1.1","rimraf":"^5.0.5","rollup":"^4.8.0","rollup-plugin-dts":"^6.1.0","rollup-plugin-visualizer":"^5.12.0","tslib":"^2.6.2","typescript":"^5.3.3","vitest":"^1.0.4"},"engines":{"node":">=14.0.0"},"browserslist":["> 1%","last 2 versions","not dead"],"gitHead":"2511a6c1c2cd6bdb9f6a3c75f102b666d9e79690","_id":"@afkarbase/qr@1.0.0","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-RrzDnZd/1RLay9Zh3AwbGpUuc8r+XzibFFQ0gqokBOYE88d5vc5D1ENOJs36R370qD2MH4XM6Sujmoh1Nf+qcA==","shasum":"690fc2f764d5434845d19861282d995bac1bcce9","tarball":"https://registry.npmjs.org/@afkarbase/qr/-/qr-1.0.0.tgz","fileCount":63,"unpackedSize":1102835,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDxidbPXL+3/LNNZGiA/Nq22agUAq1lvpjTqTPzQCHSqAIhAKiPoHanPYGEGP47qSHi7siA+Vc3bTzVA9MEXJcDCHrZ"}]},"_npmUser":{"name":"emadideen","email":"emadideen@gmail.com"},"directories":{},"maintainers":[{"name":"emadideen","email":"emadideen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/qr_1.0.0_1770062172936_0.9389549292784998"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-02T19:56:12.799Z","1.0.0":"2026-02-02T19:56:13.138Z","modified":"2026-02-02T19:56:13.453Z"},"maintainers":[{"name":"emadideen","email":"emadideen@gmail.com"}],"description":"A modern, zero-dependency TypeScript QR code generator that works everywhere JavaScript runs","homepage":"https://github.com/afkarbase/qr#readme","keywords":["qr","qrcode","qr-code","generator","typescript","zero-dependency","framework-agnostic","svg","canvas","browser","nodejs"],"repository":{"type":"git","url":"git+https://github.com/afkarbase/qr.git"},"author":{"name":"afkarbase"},"bugs":{"url":"https://github.com/afkarbase/qr/issues"},"license":"MIT","readme":"# @afkarbase/qr\r\n\r\nA modern, zero-dependency TypeScript QR code generator that works everywhere JavaScript runs.\r\n\r\n[![npm version](https://badge.fury.io/js/@afkarbase/qr.svg)](https://www.npmjs.com/package/@afkarbase/qr)\r\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@afkarbase/qr)](https://bundlephobia.com/package/@afkarbase/qr)\r\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\r\n\r\n## Features\r\n\r\n- 🚀 **Zero Dependencies** - Pure TypeScript implementation\r\n- 🌐 **Universal** - Works in browsers and Node.js\r\n- 🎯 **Framework Agnostic** - React, Vue, Angular, Vanilla JS\r\n- 📦 **Tree Shakable** - Import only what you need\r\n- 🎨 **Multiple Outputs** - SVG, Canvas, Data URLs, Raw Matrix\r\n- ⚡ **Fast** - Optimized algorithm with minimal allocations\r\n- 💪 **TypeScript First** - Full type safety and IntelliSense\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @afkarbase/qr\r\n```\r\n\r\n## Quick Start\r\n\r\n```typescript\r\nimport { qr } from '@afkarbase/qr';\r\n\r\n// Generate QR code\r\nconst qrCode = qr('Hello, World!');\r\n\r\n// Get SVG output\r\nconst svg = qrCode.toSVG();\r\n\r\n// Render to canvas\r\nqrCode.toCanvas(canvasElement);\r\n\r\n// Get data URL\r\nconst dataURL = qrCode.toDataURL('image/png');\r\n```\r\n\r\n## API Reference\r\n\r\n### `qr(data, options?)`\r\n\r\nCreates a QR code instance.\r\n\r\n#### Parameters\r\n\r\n- `data` (string): The data to encode\r\n- `options` (optional): Configuration object\r\n\r\n#### Options\r\n\r\n```typescript\r\ninterface QROptions {\r\n  // Error correction level (default: 'M')\r\n  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';\r\n  \r\n  // QR code version (default: 'auto')\r\n  version?: 'auto' | number; // 1-40\r\n  \r\n  // Margin size in modules (default: 4)\r\n  margin?: number;\r\n  \r\n  // Colors\r\n  darkColor?: string;   // default: '#000000'\r\n  lightColor?: string;  // default: '#ffffff'\r\n  \r\n  // Scale for raster outputs\r\n  scale?: number;       // default: 4\r\n}\r\n```\r\n\r\n### Output Methods\r\n\r\n#### `.toSVG(options?)`\r\n\r\nReturns an SVG string representation.\r\n\r\n```typescript\r\nconst svg = qrCode.toSVG({\r\n  width: 200,\r\n  height: 200,\r\n  xmlDeclaration: true\r\n});\r\n```\r\n\r\n#### `.toCanvas(canvas, options?)`\r\n\r\nRenders the QR code to an HTML5 Canvas element.\r\n\r\n```typescript\r\nconst canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;\r\nqrCode.toCanvas(canvas, {\r\n  scale: 8,\r\n  margin: 4\r\n});\r\n```\r\n\r\n#### `.toDataURL(format?, quality?)`\r\n\r\nReturns a base64 data URL.\r\n\r\n```typescript\r\n// PNG (default)\r\nconst pngDataURL = qrCode.toDataURL();\r\n\r\n// JPEG with quality\r\nconst jpegDataURL = qrCode.toDataURL('image/jpeg', 0.8);\r\n```\r\n\r\n#### `.toMatrix()`\r\n\r\nReturns the raw boolean matrix.\r\n\r\n```typescript\r\nconst matrix = qrCode.toMatrix();\r\n// matrix[row][col] = true (dark) | false (light)\r\n```\r\n\r\n#### `.getSize()`\r\n\r\nReturns the QR code dimensions.\r\n\r\n```typescript\r\nconst { width, height, modules } = qrCode.getSize();\r\n```\r\n\r\n## Framework Examples\r\n\r\n### React\r\n\r\n```tsx\r\nimport { qr } from '@afkarbase/qr';\r\nimport { useMemo } from 'react';\r\n\r\nfunction QRCodeComponent({ data }: { data: string }) {\r\n  const qrCode = useMemo(() => qr(data), [data]);\r\n  \r\n  return (\r\n    <div dangerouslySetInnerHTML={{ \r\n      __html: qrCode.toSVG() \r\n    }} />\r\n  );\r\n}\r\n\r\n// Or with Canvas\r\nfunction QRCanvas({ data }: { data: string }) {\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n  \r\n  useEffect(() => {\r\n    if (canvasRef.current) {\r\n      qr(data).toCanvas(canvasRef.current);\r\n    }\r\n  }, [data]);\r\n  \r\n  return <canvas ref={canvasRef} />;\r\n}\r\n```\r\n\r\n### Vue 3\r\n\r\n```vue\r\n<template>\r\n  <div v-html=\"qrSvg\"></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { qr } from '@afkarbase/qr';\r\nimport { computed } from 'vue';\r\n\r\nconst props = defineProps<{ data: string }>();\r\n\r\nconst qrSvg = computed(() => qr(props.data).toSVG());\r\n</script>\r\n```\r\n\r\n### Angular\r\n\r\n```typescript\r\nimport { Component, Input, ElementRef, ViewChild } from '@angular/core';\r\nimport { qr } from '@afkarbase/qr';\r\n\r\n@Component({\r\n  selector: 'qr-code',\r\n  template: '<canvas #canvas></canvas>'\r\n})\r\nexport class QRCodeComponent {\r\n  @Input() data!: string;\r\n  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;\r\n  \r\n  ngAfterViewInit() {\r\n    qr(this.data).toCanvas(this.canvasRef.nativeElement);\r\n  }\r\n}\r\n```\r\n\r\n### Vanilla JavaScript\r\n\r\n```javascript\r\nimport { qr } from '@afkarbase/qr';\r\n\r\n// SVG approach\r\nconst qrCode = qr('https://example.com');\r\ndocument.getElementById('qr-container').innerHTML = qrCode.toSVG();\r\n\r\n// Canvas approach\r\nconst canvas = document.getElementById('qr-canvas');\r\nqr('Hello World').toCanvas(canvas);\r\n\r\n// Image approach\r\nconst img = document.createElement('img');\r\nimg.src = qr('Data to encode').toDataURL();\r\ndocument.body.appendChild(img);\r\n```\r\n\r\n### Node.js\r\n\r\n```javascript\r\nimport { qr } from '@afkarbase/qr';\r\nimport fs from 'fs';\r\n\r\n// Generate SVG file\r\nconst svg = qr('Server-side QR generation').toSVG();\r\nfs.writeFileSync('qrcode.svg', svg);\r\n\r\n// Get raw matrix for custom processing\r\nconst matrix = qr('Custom processing').toMatrix();\r\nconsole.log(`QR Code size: ${matrix.length}x${matrix[0].length}`);\r\n```\r\n\r\n## Error Correction Levels\r\n\r\n| Level | Error Correction | Recovery Capacity |\r\n|-------|------------------|-------------------|\r\n| L     | Low              | ~7%               |\r\n| M     | Medium (default) | ~15%              |\r\n| Q     | Quartile         | ~25%              |\r\n| H     | High             | ~30%              |\r\n\r\n## QR Code Versions\r\n\r\nThe library supports QR code versions 1-40:\r\n- **Version 1**: 21×21 modules (up to 25 alphanumeric chars)\r\n- **Version 40**: 177×177 modules (up to 4,296 alphanumeric chars)\r\n\r\nUse `version: 'auto'` (default) for automatic version selection based on data length.\r\n\r\n## Browser Support\r\n\r\n- **ES2015+** environments (95%+ browser coverage)\r\n- **Node.js 14+**\r\n- Modern bundlers with ES modules support\r\n\r\n## Performance\r\n\r\n- **Bundle size**: ~12KB minified + gzipped\r\n- **Generation time**: <5ms for typical QR codes\r\n- **Memory efficient**: Minimal allocations and automatic cleanup\r\n\r\n## Contributing\r\n\r\nSee [ARCHITECTURE.md](./ARCHITECTURE.md) for technical details and development guidelines.\r\n\r\n## License\r\n\r\nMIT © [@afkarbase](https://github.com/afkarbase)","readmeFilename":"README.md","_rev":"1-6e13b2b7fe77eb545885ca17ced54118"}