QRCode

Générez des codes QR avec une apparence personnalisable, des icônes et des états de statut. Les couleurs s’adaptent automatiquement aux thèmes clair/sombre.

Installation

Ce composant nécessite qrcode comme dépendance peer :

npm install qrcode

Import

import { QRCode } from 'asterui/qrcode'

Exemples

Code QR basique

Code QR simple avec les paramètres par défaut.

</>

import { QRCode } from 'asterui'

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

export default App

Taille personnalisée

Différentes tailles de codes 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

Couleurs personnalisées

Personnalisez la couleur de premier plan. L'arrière-plan s'adapte au thème par défaut.

</>

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

Avec icône

Code QR avec logo/icône centré.

</>

import { QRCode } from 'asterui'

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

export default App

Niveau de correction d'erreur

Différents niveaux de correction d'erreur affectent la densité du code 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

Sans bordure

Supprimez la bordure pour une intégration transparente.

</>

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

État de chargement

Affichez l'état de chargement lors de la génération ou de la récupération des données du code QR.

</>

import { QRCode } from 'asterui'

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

export default App

État expiré

Affichez l'état expiré avec une fonctionnalité de rafraîchissement optionnelle.

</>

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

Code QR dynamique

Mettez à jour la valeur du code QR de manière dynamique.

</>

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

Propriété	Description	Type	Défaut
value	La valeur à encoder dans le code QR	string	-
size	Taille du canvas du code QR en pixels	number	160
errorLevel	Niveau de correction d’erreur	'L' | 'M' | 'Q' | 'H'	'M'
icon	URL de l’icône/logo à afficher au centre	string	-
iconSize	Taille de l’icône centrale en pixels	number	40
type	Type de rendu	'canvas' | 'svg'	'canvas'
color	Couleur de premier plan (couleur du code QR)	string	Adaptatif au thème
bgColor	Couleur d’arrière-plan	string	Adaptatif au thème
bordered	Afficher une bordure autour du code QR	boolean	true
status	État du statut du code QR	'active' | 'loading' | 'expired'	'active'
onRefresh	Callback lorsque le bouton de rafraîchissement est cliqué (statut expiré)	() => void	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Les codes QR incluent role="img" avec une étiquette descriptive
• Les états de chargement et d’expiration sont annoncés aux lecteurs d’écran
• Le bouton de rafraîchissement est accessible au clavier