rc-qrcode-scanner v0.2.7

QRCODE_SCANNER

Description

C'est un package qui permet de generer un qrcode et de de scanner un qrcode.

Installation

Pour installer ce package il faut ... (pas encore tester)

Utilisation

1. QRcode

Pour generer un qrcode, il faut appeler QRcode 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

1.1 Exemple

import { QRcode } from 'qrcode-scanner';
import image from '../images/Image1.png'

return(
    <>
        <QRcode 
            text="https://www.google.com"
            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) }}
        />

        <QRcode 
            text="https://www.google.com"
            id="qrcode2"
            onGeneratedSuccess={(data) => { console.log(data) }}
            onGeneratedError={(error) => { console.log(error) }}
        />

        <div id="qrcode1"></div>
        <div id="qrcode2"></div>
    </>
)

2. Scanner

Pour scanner un qrcode, il faut appeler QRScanner 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

2.1 Exemple

import { QRScanner } from 'qrcode-scanner';

return(
    <>
        <QRScanner 
            id="scanner1"
            startByScanBtn={true}
            styleScanBtn="background-color: red; color: blue;"
            onScanSuccess={(data) => { console.log(data) }}
            clearScanAfterSuccess={true}
        />

        <QRScanner 
            id="scanner1"
            onScanSuccess={(data) => { console.log(data) }}
        />

        <div id="scanner1"></div>
        <div id="scanner1"></div>
    </>
)