Un Générateur de QRCode

par Celine | Juil 14, 2024 | Développement, Github, React

Ce matin j’avais besoin d’un générateur de QRCode et voyant les nombreux résultats que renvoyait Google je me suis dit « et si j’en créais un avec React ? »
Afin de créer le générateur j’ai utilisé la librairie react-qr-code

Voici le code du composant créé pour générer un QRCode :

JavaScript

import './QRCodeGenerator.css';
// Import du hook useState de React, il sera utilisé afin de modifier la valeur du QRCode lors de la modification de la valeur du text permettant de générer le QRCide.
import { useState } from 'react';
// Import du composant QRCode de la librairie 'react-qr-code
import QRCode from 'react-qr-code';

export function QrCodeGenerator () {

    const [value, setValue] = useState();
    
    return (
    <main>
        <h1>Entrez votre url et obtenez un QRCode !</h1>
        <input
            type="text"
            onChange={(e) => setValue(e.target.value)}
            placeholder="Entrez une URL"
        />
        <div className="qrcode">
            {/* On vérifie si une valeur de QRCode a été indiquée, si c'ets le cas un QRCode est généré sinon le message "Le QRCode apparaîtr ici !" est affiché*/}
            {value ? (
                <div className="thecode">
                    <QRCode 
                        title="Liline's Lab"
                        value={value}
                        size={165}
                        level='L'
                    />
                </div>
            ) : (
                <p>Le QRCode apparaîtra ici !</p>
            )}
        </div>
    </main>
    )
}

Une fois le code finalisé j’ai utilisé la librairie gh-pages afin de pouvoir utiliser l’application directement avec Github Pages.
Utilisant Vite j’ai procédé comme suit :

dans package.json j’ai rajouté les deux lignes ci-dessous avant « build »: « vite build »,

JavaScript

    "predeploy" : "npm run build",
    "deploy" : "gh-pages -d dist",

dans vite.config.js j’ai rajouté la ligne ci-dessous avant plugins: [react()],

JavaScript

base: "/reactqrcode", //reactqrcode est ici le nom du repository

Puis j’ai déployé le projet avec

Bash

npm run deploy

Et j’ai pu utiliser la branche gh-pages afin de rendre possible l’utilisation de l’application depuis Github Pages.

L’application est disponible >> ici <<

Update !

Il est maintenant possible d’exporter le QrCode en PNG grâce à l’utilisation de la librairie html-to-image !

Et voici le code de l’application à jour.

JavaScript

import './QRCodeGenerator.css';
import { useState, useRef } from 'react';
import QRCode from 'react-qr-code';
import * as htmlToImage from "html-to-image";

export function QrCodeGenerator () {

    const [value, setValue] = useState();
    
    // Création d'une référence pour accéder à l'élément du QR code dans le DOM
    const qrCodeRef = useRef(null);
    
    // Fonction pour télécharger le QR code sous forme d'image PNG utilisant la librairie "html-to-image"
    const downloadQRCode = () => {
      htmlToImage
        .toPng(qrCodeRef.current)
        // Si la conversion, création du "lien" permettant de télécharger l'image
        .then(function (dataUrl) {
          const link = document.createElement("a"); 
          link.href = dataUrl; 
          link.download = "myQRCode.png"; 
          link.click(); 
        })
        .catch(function (error) {
          // Si la conversion ne fonctionne pas l'erreur est affichée dans la console
          console.error("Pb de création du QRCode:", error); 
        });
    };

    return (
    <main>
        <h1>Entrez votre url et obtenez un QRCode !</h1>
        <input
            type="text"
            onChange={(e) => setValue(e.target.value)}
            placeholder="Entrez une URL"
        />
        <div className="qrCodeContainer">
            {value ? (
                <div>
                    <div className="qrCode" ref={qrCodeRef}>
                        <span className='qrName'>{value}</span>
                        <QRCode 
                            title="Liline's Lab"
                            value={value}
                            size={165}
                            level='L'
                        />
                    </div>
                    <button onClick={downloadQRCode}>Télécharger le QRCode</button>
                </div>
            ) : (
                <p>Le QRCode apparaîtra ici !</p>
            )}
        </div>
    </main>
    )
}