QRCode

Generate QR codes with customizable appearance, icons, and status states. Colors automatically adapt to light/dark themes.

Installation

This component requires qrcode as a peer dependency:

npm install qrcode

Import

import { QRCode } from 'asterui/qrcode'

Examples

Basic QR Code

Simple QR code with default settings.

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <QRCode value="https://asterui.com" />
    )
}

export default App

Custom Size

Different QR code sizes.

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 items-center flex-wrap">
        <QRCode value="https://asterui.com" size={80} />
        <QRCode value="https://asterui.com" size={120} />
        <QRCode value="https://asterui.com" size={160} />
        <QRCode value="https://asterui.com" size={200} />
      </div>
    )
}

export default App

Custom Colors

Customize foreground color. Background adapts to theme by default.

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <QRCode value="https://asterui.com" color="#3b82f6" />
        <QRCode value="https://asterui.com" color="#22c55e" />
        <QRCode value="https://asterui.com" color="#a855f7" />
      </div>
    )
}

export default App

With Icon

QR code with centered logo/icon.

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <QRCode
        value="https://asterui.com"
        icon="/logo.png"
        iconSize={34}
        errorLevel="H"
      />
    )
}

export default App

Error Correction Level

Different error correction levels affect QR code density.

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <div className="text-center">
          <QRCode value="https://asterui.com/data" errorLevel="L" />
          <div className="text-sm mt-2">Level L (7%)</div>
        </div>
        <div className="text-center">
          <QRCode value="https://asterui.com/data" errorLevel="M" />
          <div className="text-sm mt-2">Level M (15%)</div>
        </div>
        <div className="text-center">
          <QRCode value="https://asterui.com/data" errorLevel="H" />
          <div className="text-sm mt-2">Level H (30%)</div>
        </div>
      </div>
    )
}

export default App

Without Border

Remove the border for seamless integration.

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <QRCode value="https://asterui.com" bordered />
        <QRCode value="https://asterui.com" bordered={false} />
      </div>
    )
}

export default App

Loading Status

Show loading state while generating or fetching QR code data.

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <QRCode value="https://asterui.com" status="loading" />
    )
}

export default App

Expired Status

Show expired state with optional refresh functionality.

</>

import { QRCode } from 'asterui'
import { useState } from 'react'

function App() {
  const [status, setStatus] = useState<'active' | 'loading' | 'expired'>('expired');
  
  const handleRefresh = () => {
    setStatus('loading');
    setTimeout(() => setStatus('active'), 2000);
  };
  
  return (
      <QRCode
        value="https://asterui.com"
        status={status}
        onRefresh={handleRefresh}
      />
    )
}

export default App

Dynamic QR Code

Update QR code value dynamically.

</>

import { QRCode } from 'asterui'
import { useState } from 'react'

function App() {
  const [text, setText] = useState('https://asterui.com');
  
  return (
      <div className="flex flex-col gap-4 items-center">
        <QRCode value={text} />
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Enter text or URL"
          className="input input-bordered w-full max-w-md"
        />
      </div>
    )
}

export default App

API

QRCode

Property	Description	Type	Default
value	The value to encode in the QR code	string	-
size	QR code canvas size in pixels	number	160
errorLevel	Error correction level	'L' | 'M' | 'Q' | 'H'	'M'
icon	URL of icon/logo to display in center	string	-
iconSize	Size of the center icon in pixels	number	40
type	Render type	'canvas' | 'svg'	'canvas'
color	Foreground color (QR code color)	string	Theme-aware
bgColor	Background color	string	Theme-aware
bordered	Show border around QR code	boolean	true
status	QR code status state	'active' | 'loading' | 'expired'	'active'
onRefresh	Callback when refresh button is clicked (expired status)	() => void	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• QR codes include role="img" with descriptive label
• Loading and expired states are announced to screen readers
• Refresh button is keyboard accessible