GitHub - mblode/beautiful-qr-code: Generate beautiful, customizable QR codes in JavaScript

QR codes for web, React, and the CLI

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.