QRCode

Gere QR codes com aparência customizável, ícones e estados de status. As cores se adaptam automaticamente aos temas claro/escuro.

Instalação

Este componente requer qrcode como dependência peer:

npm install qrcode

Importação

import { QRCode } from 'asterui/qrcode'

Exemplos

QR Code Básico

QR code simples com configurações padrão.

</>

import { QRCode } from 'asterui'

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

export default App

Tamanho Customizado

Diferentes tamanhos de QR code.

</>

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

Cores Customizadas

Customize a cor de primeiro plano. O fundo se adapta ao tema por padrão.

</>

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

Com Ícone

QR code com logo/ícone centralizado.

</>

import { QRCode } from 'asterui'

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

export default App

Nível de Correção de Erro

Diferentes níveis de correção de erro afetam a densidade do QR code.

</>

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

Sem Borda

Remove a borda para integração perfeita.

</>

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

Status de Carregamento

Mostra estado de carregamento enquanto gera ou busca dados do QR code.

</>

import { QRCode } from 'asterui'

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

export default App

Status Expirado

Mostra estado expirado com funcionalidade de atualização 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

QR Code Dinâmico

Atualiza o valor do QR code dinamicamente.

</>

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

Propriedade	Descrição	Tipo	Padrão
value	O valor para codificar no QR code	string	-
size	Tamanho do canvas do QR code em pixels	number	160
errorLevel	Nível de correção de erro	'L' | 'M' | 'Q' | 'H'	'M'
icon	URL do ícone/logo para exibir no centro	string	-
iconSize	Tamanho do ícone central em pixels	number	40
type	Tipo de renderização	'canvas' | 'svg'	'canvas'
color	Cor de primeiro plano (cor do QR code)	string	Adaptável ao tema
bgColor	Cor de fundo	string	Adaptável ao tema
bordered	Mostrar borda ao redor do QR code	boolean	true
status	Estado de status do QR code	'active' | 'loading' | 'expired'	'active'
onRefresh	Callback quando botão atualizar é clicado (status expirado)	() => void	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• QR codes incluem role="img" com rótulo descritivo
• Estados de carregamento e expirado são anunciados aos leitores de tela
• Botão de atualização é acessível por teclado