Fluxo UIFluxo UIv0.4.1

QR Code

Encode any string as a QR code matrix and render it as inline SVG, with optional logo overlay.

Basic Usage

Default QR Code

Type any URL or text — the QR updates live so you can scan it from your phone camera.

Encodes: https://fluxo-ui.utilsware.com/
31 characters · the QR re-encodes live
import { QRCode } from 'fluxo-ui';

<QRCode value="https://fluxo-ui.utilsware.com/" size={200} />

Module Shapes

Module Shapes

Square (default), rounded, or dotted modules. Each example encodes a different value.

square
https://example.com
rounded
mailto:hello@fluxo-ui.dev
dots
tel:+1-555-867-5309
<QRCode value="https://example.com" moduleShape="square" />
<QRCode value="mailto:hello@fluxo-ui.dev" moduleShape="rounded" />
<QRCode value="tel:+1-555-867-5309" moduleShape="dots" />

Error Correction

Error Correction Levels

Higher levels add redundancy so the code stays scannable when partially obscured. Each example encodes a different URL.

Level L (7% recovery)
https://news.ycombinator.com
Level M (15% recovery)
https://github.com/fluxo-ui
Level Q (25% recovery)
https://en.wikipedia.org/wiki/QR_code
Level H (30% recovery)
https://fluxo-ui.utilsware.com/?ref=docs
<QRCode value="https://news.ycombinator.com" errorCorrection="L" />
<QRCode value="https://github.com/fluxo-ui" errorCorrection="M" />
<QRCode value="https://en.wikipedia.org/wiki/QR_code" errorCorrection="Q" />
<QRCode value="https://fluxo-ui.utilsware.com/?ref=docs" errorCorrection="H" />

Customization

Color & Size Controls

Tune foreground, background, module shape, size, and quiet zone margin.

Encodes: https://fluxo-ui.utilsware.com/components/qr-code
#3b82f6#ffffff220px4
<QRCode
  value="https://fluxo-ui.utilsware.com/components/qr-code"
  size={220}
  foreground="#3b82f6"
  background="#ffffff"
  moduleShape="rounded"
  margin={4}
/>

Download

Download as image

Use a ref to call download() — supports PNG, JPEG, and SVG. PNG/JPEG accept a scale factor for high-DPI exports. This example encodes a vCard so scanning adds the contact straight to your phone.

Encodes vCard: BEGIN:VCARD VERSION:3.0 FN:Fluxo UI URL:https://fluxo-ui.utilsware.com EMAIL:hello@fluxo-ui.dev END:VCARD
import { useRef } from 'react';
import { Button, QRCode } from 'fluxo-ui';
import type { QRCodeHandle } from 'fluxo-ui';

function Example() {
    const qrRef = useRef<QRCodeHandle>(null);
    const value = `BEGIN:VCARD
VERSION:3.0
FN:Fluxo UI
URL:https://fluxo-ui.utilsware.com
EMAIL:hello@fluxo-ui.dev
END:VCARD`;

    return (
        <>
            <QRCode ref={qrRef} value={value} size={240} />
            <Button onClick={() => qrRef.current?.download({ format: 'png', fileName: 'fluxo-vcard', scale: 4 })}>
                Download PNG
            </Button>
            <Button onClick={() => qrRef.current?.download({ format: 'svg', fileName: 'fluxo-vcard' })}>
                Download SVG
            </Button>
        </>
    );
}

Import

import { QRCode } from 'fluxo-ui';
import type { QRCodeProps, QRCodeShape, QRCodeLogo } from 'fluxo-ui';

Props

valuereq
string

Data to encode (URL, text, vCard, etc.)

size
number"160"

Output pixel size of the QR code (square)

errorCorrection
'L' | 'M' | 'Q' | 'H'"'M'"

Error correction level. Auto-bumped to 'H' when a logo is provided

margin
number"4"

Quiet-zone width in modules (≥ 4 recommended)

foreground
string"'#000000'"

Color of filled modules. Default is black for maximum scannability — use a dark hex/named color when overriding (CSS variables that flip with dark mode are NOT recommended, as most phone scanners reject light-on-dark QR codes)

background
string"'#ffffff'"

Color of the quiet zone and gaps. Default is white for maximum scannability. Use 'transparent' to omit

moduleShape
'square' | 'dots' | 'rounded'"'square'"

Shape of each module

logo
{ src: string; size?: number; padding?: number; rounded?: boolean }

Optional centered logo overlay

onError
(err: Error) => void

Fired when input is too long for the chosen error-correction level

id
string

HTML id attribute

className
string

Additional CSS classes

alt
string

Accessible label (defaults to the value, truncated if long)

Features

No Dependencies

Pure-TypeScript Reed–Solomon encoder — no external runtime.

All Versions 1–40

Auto-picks the smallest QR version that fits your value at the chosen EC level.

Logo Overlay

Centered logo with auto-bumped error-correction so the code keeps scanning.

Themeable

Foreground/background accept any CSS color — including the eui-* variables for dark mode.