QRCode

Genera códigos QR con apariencia personalizable, iconos y estados de estado. Los colores se adaptan automáticamente a temas claros/oscuros.

Instalación

Este componente requiere qrcode como dependencia de pares:

npm install qrcode

Importar

import { QRCode } from 'asterui/qrcode'

Ejemplos

Código QR básico

Código QR simple con configuración predeterminada.

</>

import { QRCode } from 'asterui'

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

export default App

Tamaño personalizado

Diferentes tamaños de código QR.

</>

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

Colores personalizados

Personaliza el color del primer plano. El fondo se adapta al tema por defecto.

</>

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

Con icono

Código QR con logo/icono centrado.

</>

import { QRCode } from 'asterui'

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

export default App

Nivel de corrección de error

Diferentes niveles de corrección de error afectan la densidad del código QR.

</>

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

Sin borde

Elimina el borde para integración perfecta.

</>

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

Estado de carga

Muestra estado de carga mientras se genera o se obtienen datos del código QR.

</>

import { QRCode } from 'asterui'

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

export default App

Estado expirado

Muestra estado expirado con funcionalidad de actualización opcional.

</>

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

Código QR dinámico

Actualiza el valor del código QR dinámicamente.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
value	El valor a codificar en el código QR	string	-
size	Tamaño del canvas del código QR en píxeles	number	160
errorLevel	Nivel de corrección de error	'L' | 'M' | 'Q' | 'H'	'M'
icon	URL del icono/logo a mostrar en el centro	string	-
iconSize	Tamaño del icono central en píxeles	number	40
type	Tipo de renderizado	'canvas' | 'svg'	'canvas'
color	Color del primer plano (color del código QR)	string	Adaptable al tema
bgColor	Color de fondo	string	Adaptable al tema
bordered	Mostrar borde alrededor del código QR	boolean	true
status	Estado del código QR	'active' | 'loading' | 'expired'	'active'
onRefresh	Callback cuando se hace clic en el botón de actualizar (estado expirado)	() => void	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Los códigos QR incluyen role="img" con etiqueta descriptiva
• Los estados de carga y expirado se anuncian a lectores de pantalla
• El botón de actualizar es accesible por teclado