Make your QR code

Type a link or text, pick a style, download the image. Free, no sign-up.

Open Source

@ttsalpha/qrcode

Lightweight, fully customizable QR code library for React and React Native. Pure SVG, zero dependencies, built from scratch.

npm versionlicenseCI status
pnpm add @ttsalpha/qrcode
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 required peer dep.
3 dot styles
Square, circle, and snake-connected rounded. Mix freely with corner styles.
Customizable 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, with optional rounded corners. Size auto-clamped per ECL to stay scannable.
React Native
The same symbols on iOS and Android with react-native-svg, from @ttsalpha/qrcode/native.
Fully typed
Strict TypeScript throughout. Full IntelliSense on every prop.
Tree-shakeable
Named exports, ESM + CJS output. Minimal bundle impact.
Export helpers
toSVGString() generates SVG server-side without DOM. toDataURL() renders PNG/JPEG via Canvas.
Installation

Get started

Install

bash
pnpm add @ttsalpha/qrcode

Quick start

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

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

React 18+ is required as a peer dependency. For React Native, also install react-native-svg and import from @ttsalpha/qrcode/native; see the React Native reference.

API Reference

Props, types and helpers

Full reference lives on its own page: props, corner and logo options, React Native, export helpers, and the HTTP API params.

QRCodeProps
Every prop on <QRCode> with types and defaults
Export Helpers
toSVGString and toDataURL for SVG, PNG, JPEG
React Native
The native entry, its logo options and its limits
Core
buildQR and QRGeometry, with no React and no DOM
HTTP API
Render a QR from a URL, no install needed
FAQ

Frequently asked questions

How is this different from other QR code libraries?

Most libs handle either SSR or styling, not both. qrcode.react is SSR-safe but has no styling API. qr-code-styling covers custom dots, colors, and logos but relies on Canvas and breaks server-side. This lib covers all of it: custom dot shapes, per-corner colors, logo support, pure SVG, SSR-safe. 3.1× faster cold start than qrcode.react, 46× faster styled renders than qr-code-styling. See the benchmark →

Does it work with Next.js and server-side rendering?

Yes. The library is pure SVG: no DOM, no Canvas. The QRCode component renders server-side in Next.js App Router and works on Edge runtimes. In a Server Component, import @ttsalpha/qrcode/server and call toSVGString() directly: that entry carries no client boundary and pulls in no React.

Can I generate QR codes without React (Node.js, CLI, email templates)?

Yes. toSVGString() produces a static SVG string, no DOM or React required; import it from @ttsalpha/qrcode/core or @ttsalpha/qrcode/server. toDataURL() is browser-only as it requires the Canvas API.

Does it work with React Native and Expo?

Yes. Import QRCode from @ttsalpha/qrcode/native and install react-native-svg (npx expo install react-native-svg on Expo). It draws the same symbols as the web component, with the same dot, corner, color and logo options. logo.src takes a URL or a require()d asset and logo.svg takes SVG markup; logo.element and the toDataURL helper are not available, but the ref goes to the Svg, so ref.toDataURL gives a PNG.

How do I add a logo to the center of a QR code?

Use the logo prop with src for an image URL, or element for any React node. Set radius to round its corners. Error correction level is auto-picked based on logo size to keep the code scannable.

How do I export a QR code as PNG or JPEG?

Call toDataURL() in the browser. It returns a data URL you can attach to a download link. Use the format option for JPEG.

Does it support custom colors and dark mode?

Yes. Use dotColor for data modules, backgroundColor (accepts "transparent"), and the corner prop to color finder patterns independently. Pair with your own dark-mode logic to switch colors at runtime.