QRCode

Apresentação

O componente QRCode é responsável por gerar códigos QR dinamicamente a partir de texto, URLs ou dados. Ele suporta personalização de cores, tamanho, margens e nível de correção de erros, sendo ideal para compartilhamento de links, informações de contato ou qualquer dado que precise ser escaneado.

Quando usar

• Para compartilhar URLs
• Para exibir informações de contato
• Para criar códigos de pagamento
• Para compartilhar Wi-Fi
• Para exibir dados de eventos
• Para criar códigos promocionais
• Para compartilhar localização
• Para exibir informações de produtos

Forma básica de uso

import { QRCode } from 'eitri-luminus';

// QRCode básico
<QRCode value="https://www.exemplo.com" />

// QRCode com cores personalizadas
<QRCode 
  value="https://www.exemplo.com"
  foregroundColor="#000000"
  backgroundColor="#FFFFFF"
/>

// QRCode com tamanho personalizado
<QRCode 
  value="https://www.exemplo.com"
  scale={8}
  margin={2}
/>

// QRCode com nível de correção de erro
<QRCode 
  value="https://www.exemplo.com"
  errorCorrectionLevel="H"
/>

// QRCode com classes personalizadas
<QRCode 
  value="https://www.exemplo.com"
  className="border rounded-lg p-4"
/>

// QRCode com estilos inline
<QRCode 
  value="https://www.exemplo.com"
  style={{ 
    border: '2px solid #ccc',
    borderRadius: '8px',
    padding: '16px'
  }}
/>

// QRCode responsivo
<QRCode 
  value="https://www.exemplo.com"
  className="w-32 h-32 md:w-48 md:h-48"
/>

// QRCode com identificador
<QRCode 
  id="qr-pagamento"
  value="https://www.exemplo.com"
/>

// QRCode com título e alt personalizados
<QRCode 
  value="https://www.exemplo.com"
  title="QR Code para Pagamento"
  alt="Código QR para realizar pagamento"
/>

// QRCode para Wi-Fi
<QRCode 
  value="WIFI:T:WPA;S:MinhaRede;P:MinhaSenha;;"
  title="Conectar ao Wi-Fi"
/>

// QRCode para contato
<QRCode 
  value="BEGIN:VCARD\nVERSION:3.0\nFN:João Silva\nTEL:+5511999999999\nEMAIL:[email protected]\nEND:VCARD"
  title="Adicionar Contato"
/>

// QRCode com layout flexível
<QRCode 
  value="https://www.exemplo.com"
  display="block"
  margin="4"
  textAlign="center"
/>

Propriedades

Propriedade	Tipo	Descrição
value	string	Dados a serem codificados no QR Code
foregroundColor	string	Cor do QR Code (padrão: "#000000")
backgroundColor	string	Cor de fundo (padrão: "#FFFFFF")
errorCorrectionLevel	string	Nível de correção de erro (L, M, Q, H)
scale	number	Tamanho dos módulos (padrão: 4)
margin	number	Margem ao redor do QR Code (padrão: 4)
title	string	Título da imagem (padrão: "QR Code")
alt	string	Texto alternativo (padrão: "QR Code")
dataCy	string	Atributo data-cy para testes (padrão: "QRCode")
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Níveis de Correção de Erro

• L (Low): 7% de correção
• M (Medium): 15% de correção
• Q (Quartile): 25% de correção (padrão)
• H (High): 30% de correção

Heranças

O componente QRCode herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Métodos via Ref

O componente QRCode expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { QRCode } from 'eitri-luminus';

function MyComponent() {
  const qrCodeRef = useRef<QRCode>(null);

  const handleRegenerate = async () => {
    await qrCodeRef.current?.regenerate();
  };

  const handleDownload = () => {
    qrCodeRef.current?.download('png');
  };

  const handleGetDataUrl = () => {
    const dataUrl = qrCodeRef.current?.getDataUrl('png');
    console.log('Data URL:', dataUrl);
  };

  return (
    <>
      <QRCode ref={qrCodeRef} value="https://www.exemplo.com" />
      <button onClick={handleRegenerate}>Regenerar</button>
      <button onClick={handleDownload}>Baixar</button>
      <button onClick={handleGetDataUrl}>Obter Data URL</button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
regenerate()	Promise<void>	Regenera o QRCode com as propriedades atuais
download(format?: 'png' | 'svg')	void	Baixa o QRCode como imagem
getDataUrl(format?: 'png' | 'svg')	string	Retorna o data URL do QRCode

Observações

• O componente gera QR Codes dinamicamente usando a biblioteca qrcode
• Mantém a semântica HTML apropriada com tag <img>
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tamanhos e resoluções
• Pode ser combinado com outros componentes
• Ideal para compartilhamento de dados
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de dados
• Funciona bem com diferentes formatos de entrada
• Gera QR Codes otimizados para leitura
• Métodos via ref disponíveis para controle programático do QRCode