react-quick-response

A lightweight React component for generating customizable QR codes as SVG elements with support for embedded content overlays.

Installation

npm install react-quick-response
# or
yarn add react-quick-response
# or
pnpm add react-quick-response

Basic Usage

import { ReactQR } from "react-quick-response";

function App() {
  return <ReactQR value="https://example.com" size={200} />;
}

Advanced Usage

Custom Styling

<ReactQR
  value="https://example.com"
  size={256}
  errorCorrectionLevel="H"
  margin={8}
  foregroundColor="#1a1a1a"
  backgroundColor="#f5f5f5"
/>

With Logo Overlay

<ReactQR value="https://example.com">
  <circle cx="24" cy="24" r="20" fill="#007bff" />
  <text x="24" y="28" textAnchor="middle" fill="white" fontSize="12">
    LOGO
  </text>
</ReactQR>

import ReactLogo from "./assets/react.svg?react";

<ReactQR value="https://react.dev" errorCorrectionLevel="M">
  <ReactLogo width={32} height={32} />
</ReactQR>;

import ViteLogo from "./assets/vite.png?inline";

<ReactQR value="https://vite.dev" errorCorrectionLevel="M">
  <image href={ViteLogo} width={32} height={32} />
</ReactQR>;

API Reference

Props

Prop	Type	Default	Description
value	string	Required	The text or URL to encode in the QR code
size	number	128	Width and height of the QR code in pixels
errorCorrectionLevel	"L" | "M" | "Q" | "H"	"L"	Error correction level (L=Low, M=Medium, Q=Quartile, H=High)
margin	number	4	Margin around the QR code in pixels
foregroundColor	string	"#000000"	Color of the QR code modules
backgroundColor	string	"#ffffff"	Background color of the QR code
children	React.ReactNode	undefined	SVG content to overlay in the center

Error Correction Levels

• L (Low): ~7% error correction
• M (Medium): ~15% error correction
• Q (Quartile): ~25% error correction
• H (High): ~30% error correction

Higher error correction levels allow for more content overlay but result in denser QR codes.

Requirements

• React 16.8+ (hooks support)
• TypeScript 4.0+ (if using TypeScript)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.