Un package React pour générer des QR codes et les scanner
npm install rc-qrcode-scannerQRcode en lui passant plusieurs parametres :
Voici la liste des parametres qui sont essentiels pour le bon fonctionnement du module :
- text :
- type : String
- description : C'est le texte qui sera converti en qrcode
- exemple : "https://www.google.com" ou une fonction qui retourne un string
- valeur par defaut : error
- id :
- type : String
- description : C'est l'id du block qui contiendra le qrcode, il doit etre unique pour chaque qrcode
- exemple : "qrcode1" ou bien "qr-${uid}"
- valeur par defaut : NON
Voici la liste des parametres qui sont optionnels :
- width :
- type : Number
- description : C'est la largeur du qrcode
- exemple : 150
- valeur par defaut : 250
- height :
- type : Number
- description : C'est la hauteur du qrcode
- exemple : 150
- valeur par defaut : 250
- colorDark :
- type : String
- description : C'est la couleur du qrcode, il faut mettre un code couleur en hexadecimal qui commence par "#" et qui contient 6 caracteres
- exemple : "#000000"
- valeur par defaut : "#000000"
- colorLight :
- type : String
- description : C'est la couleur du fond du qrcode, il faut mettre un code couleur en hexadecimal qui commence par "#" et qui contient 6 caracteres
- exemple : "#ffffff"
- valeur par defaut : "#ffffff"
- logoImage :
- type : String
- description : C'est l'image qui sera affiché au milieu du qrcode, il faut mettre le chemin de l'image
- exemple : "/assets/images/logo.png"
- valeur par defaut : ""
- startByQrcodeBtn :
- type : Boolean
- description : C'est un bouton qui permet de lancer la generation du qrcode si faux le qrcode sera generer automatiquement et sera recuperable avec la fonction onGeneratedSuccess
- exemple : true
- valeur par defaut : false
- styleQRcodeBtn :
- type : String
- description : C'est le style qui sera appliqué au bouton qui permet lancer la generation du qrcode
- exemple : "background-color: red; color: blue;"
- valeur par defaut : ""
- contentQRcodeBtn :
- type : String
- description : C'est le contenu qui sera injecté entre les balises du bouton qui permet lancer la generation du qrcode
- exemple : "Generer"
- valeur par defaut : "Générer le QRcode"
- onGeneratedSuccess :
- type : Function
- description : C'est une fonction qui sera appelé lorsque le qrcode sera generer avec succes, elle prend en parametre le qrcode en base64
- exemple : (data) => { console.log(data) }
- valeur par defaut : NON
- onGeneratedError :
- type : Function
- description : C'est une fonction qui sera appelé lorsque le qrcode ne sera pas generer avec succes, elle prend en parametre l'erreur
- exemple : (error) => { console.log(error) }
- valeur par defaut : NON
$3
import { QRcode } from 'qrcode-scanner';
import image from '../images/Image1.png'return(
<>
id="qrcode1"
width={150}
height={150}
colorDark="#000000"
colorLight="#ffffff"
logoImage={image}
startByQrcodeBtn={true}
styleQRcodeBtn="background-color: red; color: blue;"
onGeneratedSuccess={(data) => { console.log(data) }}
onGeneratedError={(error) => { console.log(error) }}
/>
id="qrcode2"
onGeneratedSuccess={(data) => { console.log(data) }}
onGeneratedError={(error) => { console.log(error) }}
/>
)
$3
Pour scanner un qrcode, il faut appeler en lui passant plusieurs parametres :
`
Voici la liste des parametres qui sont essentiels pour le bon fonctionnement du module :
- id :
- type : String
- description : C'est l'id du block qui contiendra le scanner, il doit etre unique pour chaque scanner
- exemple : "scanner1"
- valeur par defaut : NON
Voici la liste des parametres qui sont optionnels :
- startByScanBtn :
- type : Boolean
- description : C'est un bouton qui permet de lancer le scanner si faux le scanner sera lancer automatiquement et sera recuperable avec la fonction onScanSuccess
- exemple : true
- valeur par defaut : false
- styleScanBtn :
- type : String
- description : C'est le style qui sera appliqué au bouton qui permet lancer le scanner
- exemple : "background-color: red; color: blue;"
- valeur par defaut : ""
- contentScanBtn :
- type : String
- description : C'est le contenu qui sera injecté entre les balises du bouton qui permet lancer le scanner
- exemple : "Scanner"
- valeur par defaut : "Lancer le scan"
- onScanSuccess :
- type : Function
- description : C'est une fonction qui sera appelé lorsque le scanner aura scanner un qrcode avec succes, elle prend en parametre le qrcode en base64
- exemple : (data) => { console.log(data) }
- valeur par defaut : NON
- clearScanAfterSuccess :
- type : Boolean
- description : C'est un boolean qui permet de supprimer le scanner apres avoir scanner un qrcode avec succes
- exemple : true
- valeur par defaut : false
$3
import { QRScanner } from 'qrcode-scanner';return(
<>
startByScanBtn={true}
styleScanBtn="background-color: red; color: blue;"
onScanSuccess={(data) => { console.log(data) }}
clearScanAfterSuccess={true}
/>
onScanSuccess={(data) => { console.log(data) }}
/>
)