@qr-plus

Monorepo for the @qr-plus ecosystem — a zero-dependency QR code generator written in TypeScript.

Packages

Package	Description	Version
@qr-plus/core	Core QR code generator — zero dependencies, ISO/IEC 18004
@qr-plus/react	React components and hooks — SVG-first, fully typed
@qr-plus/vue	Vue 3 components and composables — SVG-first, fully typed
@qr-plus/cli	CLI tool for generating QR codes from the terminal
@qr-plus/wifi	WiFi QR code string builder with validation
@qr-plus/vcard	vCard QR code string builder with validation
@qr-plus/compress	QR-optimized compression (DEFLATE + Base45)

Quick Start

React

npm install @qr-plus/react

import { QRCode } from "@qr-plus/react";

// Simple usage
<QRCode value="https://example.com" />

// With options
<QRCode
  value="https://example.com"
  size={300}
  errorCorrectionLevel="H"
  moduleShape="rounded"
  cornerRadius={0.3}
  darkColor="#1a1a1a"
/>

Also available: <QRCodeCanvas />, <QRCodeDownload />, and useQRCode() hook. See the React package README.

Vue

npm install @qr-plus/vue

<script setup>
import { QRCode } from "@qr-plus/vue";
</script>

<template>
  <!-- Simple usage -->
  <QRCode value="https://example.com" />

  <!-- With options -->
  <QRCode
    value="https://example.com"
    :size="300"
    error-correction-level="H"
    module-shape="rounded"
    :corner-radius="0.3"
    dark-color="#1a1a1a"
  />
</template>

Also available: <QRCodeCanvas />, <QRCodeDownload />, and useQRCode() composable. See the Vue package README.

CLI

npx @qr-plus/cli "https://example.com"

# Save as SVG or PNG
qr-plus "Hello" -o hello.svg
qr-plus "Hello" -o hello.png -s large

For full CLI options, see the CLI package README.

Library

npm install @qr-plus/core

import { generateQR, renderToSVG, renderToTerminal } from "@qr-plus/core";

// Generate QR matrix
const { matrix } = generateQR("Hello World");

// Render as SVG string
const svg = renderToSVG("Hello World", { scale: 10 });

// Print to terminal
console.log(renderToTerminal("Hello World"));

For full API documentation, see the core package README.

WiFi & vCard

Generate WiFi or contact QR codes with proper formatting and validation:

npm install @qr-plus/wifi @qr-plus/vcard

import { buildWifiString } from "@qr-plus/wifi";
import { buildVCardString } from "@qr-plus/vcard";
import { renderToSVG } from "@qr-plus/core";

// WiFi QR
const wifiSvg = renderToSVG(buildWifiString({
  ssid: "GuestNetwork",
  password: "welcome123",
}));

// Contact QR
const vcardSvg = renderToSVG(buildVCardString({
  firstName: "John",
  lastName: "Doe",
  phone: "+1234567890",
  email: "john@example.com",
}));

See the WiFi README and vCard README for full API docs.

Compression

Fit more data in a single QR code with DEFLATE + Base45 compression:

npm install @qr-plus/compress

import { compress, decompress } from "@qr-plus/compress";
import { renderToSVG } from "@qr-plus/core";

// Compress large payloads for QR
const result = await compress({ data: largeJsonString });
const svg = renderToSVG(result.data); // QR-ready alphanumeric string

// Decompress on the other end
const original = await decompress(result.data);

See the Compress README for full API docs.

Development

This project uses pnpm workspaces and Turborepo for monorepo orchestration.

Prerequisites

• Node.js >= 18
• pnpm >= 10

Setup

pnpm install

Commands

pnpm run build          # Build all packages
pnpm run test           # Run all tests (unit + integration + E2E)
pnpm run typecheck      # Type check all packages
pnpm run lint           # Lint all packages
pnpm run format:check   # Check formatting
pnpm run docs           # Generate API docs

Repository Structure

qr-plus/
├── packages/
│   ├── core/          ← @qr-plus/core (published to npm)
│   ├── react/         ← @qr-plus/react (published to npm)
│   ├── vue/           ← @qr-plus/vue (published to npm)
│   ├── cli/           ← @qr-plus/cli (published to npm)
│   ├── wifi/          ← @qr-plus/wifi (published to npm)
│   ├── vcard/         ← @qr-plus/vcard (published to npm)
│   ├── compress/      ← @qr-plus/compress (published to npm)
│   └── e2e-tests/     ← E2E test suite
├── docs/              ← Ecosystem documentation
├── turbo.json         ← Turborepo pipeline
├── pnpm-workspace.yaml
└── tsconfig.base.json ← Shared TypeScript config

Documentation

• Contributing Guide — Setup, development, publishing
• API Reference — TypeDoc, deployed on GitHub Pages
• Technical Documentation
• Roadmap
• Future Ecosystem

License

MIT