QRCode

    Generate QR codes from text or URLs with customization options.

    When to Use

    • To encode URLs, text, or data as scannable QR codes
    • For sharing links or payment information
    • For download or authentication flows

    Import

    import { QRCode } from "orizon";

    Examples

    Basic

    <QRCode value="https://orizon.dev" />

    Custom Size & Color

    <QRCode value="https://orizon.dev" size={200} color="#0d9488" />

    With Icon

    <QRCode value="https://orizon.dev" icon="/logo.png" />

    Status

    QR code expired
    <QRCode value="..." status="active" />
<QRCode value="..." status="expired" onRefresh={() => refresh()} />
<QRCode value="..." status="loading" />
    Tip

    QR codes are generated using qrcode.react and are fully scannable. Use errorLevel="H" for maximum error correction when adding a center icon.

    API

    QRCodeProps

    • value — string — Content to encode (required)
    • size — number — QR code size in pixels (default: 160)
    • color — string — Foreground color (default: "#000000")
    • bgColor — string — Background color (default: "#ffffff")
    • bordered — boolean — Show border (default: true)
    • errorLevel — "L" | "M" | "Q" | "H" — Error correction level (default: "M")
    • icon — string — Center icon URL
    • iconSize — number — Icon size (default: 40)
    • status — "active" | "expired" | "loading" | "scanned" — QR status overlay
    • type — "canvas" | "svg" — Render type (default: "canvas")
    • onRefresh — () => void — Refresh callback when expired