QRCode
qrcodeGenerates theme-aware QR SVGs with version and correction boosting, excavated or watermark logos, plus SVG and high-DPI PNG export helpers.
Usage
Basic usage
Just pass in value, and the dark block inherits the currentColor eating theme by default.
<QRCode value="https://hulian.dev" size={160} />Correction level
level L/M/Q/H Increasing redundancy (with logo recommendation H).
<>
<QRCode value="https://hulian.dev" size={120} level="L" />
<QRCode value="https://hulian.dev" size={120} level="H" />
</>Chinese content
The kernel has been overwritten to UTF-8 encoding, which can directly encode Chinese.
<QRCode value="Hulian component library · Mobile QR code" size={140} level="H" />Custom color matching
color/background Specify explicitly, or use the text-* utility class to change the dark block color.
<QRCode
value="https://hulian.dev"
size={140}
color="#0f172a"
background="#f1f5f9"
/>Center Logo
Pass logo and embed it in the center of the QR code. Be sure to add level="H" to leave enough redundancy.
<QRCode
value="https://hulian.dev"
size={160}
level="H"
logo={{ src: "/logo.png", size: 36 }}
/>Watermark type Logo
excavate={false} does not cut out the blank, and is equipped with opacity as watermark; the opaque logo does not cut out the blank, the module will be covered and cannot be scanned out.
<QRCode
value="https://hulian.dev"
level="H"
logo={{ src: "/logo.png", size: 60, excavate: false, opacity: 0.25 }}
/>Stable density · Automatic upgrade
minVersion pins the lower limit of the version to make a group of code density consistent (the content will not jump when the content becomes longer); boostLevel is enabled by default, and you can get higher error correction for free without upgrading the version.
<>
<QRCode value="A" minVersion={4} />
<QRCode value="https://hulian.dev/components/qrcode" minVersion={4} />
</>Export SVG / PNG
qrCodeSvgString produces an independent SVG string (can also be used on the server), qrCodeToPngDataUrl produces PNG data URL (automatically press DPR to enlarge, default white background).
SVG string 6263 Characters
import { qrCodeSvgString, qrCodeToPngDataUrl } from "@hulianui/ui"
// Download SVG
const svg = qrCodeSvgString({ value: url, size: 512 })
download(new Blob([svg], { type: "image/svg+xml" }), "qr.svg")
// Download PNG
const png = await qrCodeToPngDataUrl({ value: url, pixelSize: 512 })
Object.assign(document.createElement("a"), { href: png, download: "qr.png" }).click()When to use
Use QRCode to encode scannable URLs or text in a locally rendered SVG. It supports themed colors, UTF-8 text, and a center logo without a remote image-generation service.
Import
import { QRCode, buildQRCode, qrCodeSvgString, qrCodeToPngDataUrl } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value* | string | — | UTF-8 URL or text to encode. |
| size | number | 160 | Side length in pixels. |
| level | "L" | "M" | "Q" | "H" | "M" | Error-correction level; prefer H with a logo. |
| margin | number | 2 | Quiet-zone width in modules. |
| color | string | currentColor | Dark-module color inherited from text color by default. |
| background | string | Transparent | Background color. |
| logo | QRCodeLogo | — | Center { src: string; size?: number } logo; pair with level="H". |
| aria-label | string | The value | Accessibility label. |
| className | string | — | Custom class name. |
Additional capabilities
| Name | Type | Default | Description |
|---|---|---|---|
| minVersion | number | — | Minimum QR version from 1 to 40. Longer content can still increase the version rather than being truncated; setting a floor keeps a group of codes visually consistent in density. |
| boostLevel | boolean | true | Raises the error-correction level when spare capacity allows, without increasing the QR version. |
| logo.excavate | boolean | true | Places a background patch under the logo to clear covered modules. Set to false for a translucent watermark-style logo. |
| logo.opacity | number | 1 | Logo opacity, commonly combined with excavate={false} for a watermark. |
The export helpers use the same encoding core as the component, so their output stays consistent:
qrCodeSvgString({ value, size, color, background, ... })returns a standalone SVG string for downloads, email, print artwork, or server-side use. Exported files need concrete colors such as#000and#fff;currentColorhas nothing to inherit outside a page.qrCodeToPngDataUrl({ value, pixelSize, ... })returns a browser-sidePromise<string>containing a PNG data URL. It scales fordevicePixelRatioso print and high-density displays remain crisp and uses a white background by default.buildQRCode(options)returns the pure matrix data{ count, total, path, level, version }for custom canvas, poster-composition, or nonstandard rendering.
Pitfalls
- Do not export a PNG with a transparent background. An exported bitmap cannot inherit the page background, and a transparent code may become unreadable when printed or placed on a white document.
qrCodeToPngDataUrldefaults to white for this reason. - A logo without excavation must be translucent. An opaque logo with
excavate={false}covers modules directly and may make the code unscannable; pair watermark mode withopacity. - Unlike qrcode.react's fixed black foreground and white background defaults, QRCode uses
currentColorand a transparent background so it follows the theme.qrCodeToPngDataUrlprovides export support without adding a second Canvas component and dependency surface. - Dark modules default to
currentColor; set a text class or explicitcolor, and provide sufficient background contrast. - Use
level="H"withlogo, or the covered modules may exceed available correction capacity. - UTF-8 or long content increases QR density. Increase visual size and scanning distance accordingly.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge