Data Display

QR Code

Generate scannable QR codes from any string value, with optional embedded image and status states.

QR code expired

Installation

npx benflux-ui add qrcode

Usage

import { QRCode } from "@benflux-ui/react"

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

// Canvas renderer with high error correction
<QRCode value="https://example.com" type="canvas" level="H" size={200} />

// With embedded logo
<QRCode
  value="https://example.com"
  imageSettings={{ src: "/logo.png", width: 32, height: 32, excavate: true }}
  bordered
/>

// Status states
<QRCode value="https://example.com" status="loading" bordered />
<QRCode value="https://example.com" status="expired" onRefresh={refetch} bordered />

Props

Prop	Type	Default	Description
value*	string	—	The text or URL to encode
size	number	128	Width and height in pixels
level	"L" \| "M" \| "Q" \| "H"	"M"	Error correction level
type	"svg" \| "canvas"	"svg"	Renderer type
bgColor	string	"#ffffff"	Background color
fgColor	string	"#000000"	Foreground color
status	"active" \| "loading" \| "expired"	"active"	Overlay status state
onRefresh	() => void	—	Called when refresh is clicked in expired state
bordered	boolean	false	Add border and padding around the QR code
imageSettings	object	—	Embed an image in the center of the QR code