beautiful-qr-code

QR codes for web, React, and the CLI

Try it out

Packages

• beautiful-qr-code (core)
• @beautiful-qr-code/react
• @beautiful-qr-code/cli

Install

# core
npm install beautiful-qr-code

# react
npm install @beautiful-qr-code/react

# cli (global)
npm install -g @beautiful-qr-code/cli

# one-off cli usage
npx @beautiful-qr-code/cli "https://example.com"

Quick Start

Core

import { QRCodeStyling } from "beautiful-qr-code";

const qrCode = new QRCodeStyling({
  data: "https://github.com/mblode/beautiful-qr-code",
  foregroundColor: "#1a73e8",
  backgroundColor: "#ffffff",
  radius: 1,
});

await qrCode.append(document.getElementById("qr-container"));
await qrCode.download({ name: "qr-code", extension: "png" });

React

import { BeautifulQRCode } from "@beautiful-qr-code/react";

export function App() {
  return (
    <BeautifulQRCode
      data="https://github.com/mblode/beautiful-qr-code"
      foregroundColor="#1a73e8"
      backgroundColor="#ffffff"
      radius={1}
    />
  );
}

CLI

beautiful-qr-code "https://example.com" -o qr.svg -f svg

Configuration

Shared options: data, type, foregroundColor, backgroundColor, radius, padding, logoUrl, hasLogo.

Package docs:

• packages/core/README.md
• packages/react/README.md
• packages/cli/README.md

Contributing

We welcome contributions. See CONTRIBUTING.md.

License

MIT

---

Crafted by Matthew Blode