@ttsalpha/qrcode

Lightweight, fully customizable React QR code library.
Pure SVG · Zero dependencies · Built from scratch.

pnpm add @ttsalpha/qrcode

square

circle

rounded

Features

What's included

Pure SVG

No canvas, no raster. Scales perfectly at any resolution — print or screen.

Zero dependencies

QR encoding built from scratch per ISO/IEC 18004. React is the only peer dep.

3 dot styles

Square, circle, and snake-connected rounded — mix freely with corner styles.

Custom corners

Independent style and color for each finder pattern part (dot and square ring).

Logo support

Embed any image URL or React node in the center. Use errorCorrectionLevel H.

Fully typed

Strict TypeScript throughout. Full IntelliSense on every prop.

Tree-shakeable

Named exports, ESM + CJS output. Minimal bundle impact.

Playground

Try it live

Adjust every prop and see the result instantly.

tsx

<QRCode
  value="https://github.com/ttsalpha/qrcode"
  dotStyle="rounded"
  dotColor="#0d0d0d"
  backgroundColor="#ffffff"
  corner={{
    square: { style: "extra-rounded", color: "#14b8a6" },
    dot: { style: "rounded" },
  }}
  qr={{ errorCorrectionLevel: "M" }}
/>

value

dotStyle

dotColor

backgroundColor

corner.square.style

corner.square.color

corner.dot.style

errorCorrectionLevel

logo.src

Installation

Get started

Install

pnpm add @ttsalpha/qrcode
# npm install @ttsalpha/qrcode
# yarn add @ttsalpha/qrcode

Quick start

import { QRCode } from '@ttsalpha/qrcode';

export default function App() {
  return <QRCode value="https://example.com" />;
}

React 18+ is required as a peer dependency.

API Reference

Props

QRCodeProps

Prop	Type	Default	Description
`value`	`string`	`—`	Data to encode (required)
`width`	`number`	`256`	SVG width in pixels
`height`	`number`	`256`	SVG height in pixels
`margin`	`number`	`4`	Quiet zone in modules
`dotStyle`	`DotStyle`	`'square'`	Style of data modules
`dotColor`	`string`	`'#000000'`	Color of data modules
`backgroundColor`	`string`	`'#ffffff'`	Background — 'transparent' accepted
`corner`	`CornerOptions`	`—`	Finder pattern corner styles
`logo`	`LogoOptions`	`—`	Logo in center
`qr`	`QROptions`	`—`	QR encoding options
`className`	`string`	`—`	CSS class on <svg>
`style`	`CSSProperties`	`—`	Inline style on <svg>

DotStyle

Value	Description
`'square'`	Full square (default)
`'circle'`	Full circle
`'rounded'`	Rounded; adjacent modules connect smoothly (fluid/snake effect)

CornerOptions

interface CornerOptions {
  dot?: {
    style?: 'square' | 'rounded' | 'circle'; // inner 3×3 block
    color?: string;
  };
  square?: {
    style?: 'square' | 'rounded' | 'extra-rounded'; // outer 7×7 ring
    color?: string;
  };
}

When corner.square.style is 'extra-rounded' and corner.dot.style is unset, the dot defaults to 'rounded'.

LogoOptions

interface LogoOptions {
  src?: string;        // https, relative path, blob:, or data:image/… URI
  element?: ReactNode; // takes priority over src when both provided
  width?: number;      // default: 20% of QR width
  height?: number;     // default: 20% of QR height
  padding?: number;    // transparent padding around the logo
}

Security: javascript: and non-image data: URIs in src are silently rejected. Never pass unsanitised user input as element — it renders verbatim inside <foreignObject>.

QROptions

interface QROptions {
  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'; // default: 'M'
  version?: number; // 1–40, auto by default
}

Level	Recovery	Use when
`L`	~7%	Clean environments, minimal data
`M`	~15%	General purpose (default)
`Q`	~25%	Industrial / harsh conditions
`H`	~30%	QR codes with a center logo

Examples

Common patterns

Default

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

Rounded dots

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{ square: { style: 'extra-rounded' } }}
/>

Circle dots

<QRCode
  value="https://example.com"
  dotStyle="circle"
  corner={{
    square: { style: 'rounded' },
    dot: { style: 'circle' },
  }}
/>

Accent corners (single color)

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{
    square: { style: 'extra-rounded', color: '#14b8a6' },
    dot: { color: '#14b8a6' },
  }}
/>

Transparent background

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  dotColor="#ffffff"
  backgroundColor="transparent"
  corner={{ square: { style: 'extra-rounded' } }}
/>

With logo — errorCorrectionLevel: 'H'

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{ square: { style: 'extra-rounded' } }}
  logo={{ src: '/logo.png', width: 48, height: 48, padding: 4 }}
  qr={{ errorCorrectionLevel: 'H' }}
/>

Version 1 — numeric data

<QRCode
  value="12345"
  qr={{ version: 1, errorCorrectionLevel: 'L' }}
/>