paint-brush
Comment créer un générateur de code QR dans Reactpar@terieyenike
57,554 lectures
57,554 lectures

Comment créer un générateur de code QR dans React

par Teri Eyenike8m2022/07/01
Read on Terminal Reader
Read this story w/o Javascript

Trop long; Pour lire

L'idée derrière la création d'un générateur de code de réponse rapide (QR) est de traduire les données des images en texte. Un code QR est simplement la représentation de données d'image sous forme de texte, et il a beaucoup d'applications utiles, des menus de restaurant et des billets de concert, aux invitations de calendrier en ligne, aux paiements, et la liste continue.

Company Mentioned

Mention Thumbnail
featured image - Comment créer un générateur de code QR dans React
Teri Eyenike HackerNoon profile picture

L'idée derrière la création d'un générateur de code de réponse rapide (QR) est de traduire les données des images en texte. Un code QR est simplement la représentation de données d'image sous forme de texte, et il a beaucoup d'applications utiles, des menus de restaurant et des billets de concert, aux invitations de calendrier en ligne, aux paiements, et la liste continue.

Dans ce didacticiel, vous apprendrez à créer un code QR à l'aide de la bibliothèque JavaScript, React. L'avantage d'utiliser React est qu'il facilite la création d'applications frontales car il offre aux développeurs des moyens de réutiliser les composants.

Pour suivre ce didacticiel, les éléments suivants seront couverts :

  • Conditions préalables
  • Commencer
  • Création d'un générateur de code QR
  • Styliser l'application de code QR
  • Téléchargement du code QR généré
  • Conclusion
  • Ressources

Démo

Conditions préalables

Pour terminer ce didacticiel, vous avez besoin des éléments suivants :

  • Compréhension de base de React.js

Commencer

Avant d'écrire une ligne de code, ouvrez votre terminal et exécutez la commande suivante :

 npx create-react-app qrcode-generator

La commande ci-dessus échafaude les fichiers et installe quelques packages nécessaires pour créer l'application React.

Ensuite, accédez au répertoire du projet et exécutez le serveur de développement accessible sur

 http://localhost:3000
en utilisant la commande ci-dessous pour prévisualiser l'application dans le navigateur :

 cd qrcode-generator npm start

Enfin, installons la bibliothèque de dépendances nécessaire à la création du générateur de code QR. Exécutez la commande :

 npm install qrcode.react

 qrcode.react
: Un composant React pour générer des codes QR pour le rendu dans le DOM.

Création d'un générateur de code QR

Excellent travail jusqu'à présent !

La création du générateur de code QR commencera par la création des fichiers et des composants qui contiendront la structure du code QR. Dans le répertoire src, créez un dossier appelé composants et un fichier nommé QrCode.js dans le dossier.

Copiez et collez le code suivant :

 // src/components/QrCode.js
import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const downloadQRCode = ( e ) => {  e.preventDefault();  setUrl( "" ); };  const qrCodeEncoder = ( e ) => {  setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "https://hackernoon.com"
     />
          < button type = "submit" disabled = {!url} >
      Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

Les extraits de code ci-dessus effectuent les opérations suivantes :

  • Importer
     useState
    est utilisé pour déclarer l'état initial de la variable, url qui est définie sur une chaîne vide, et le
     setState
    fonction,
     setUrl
    utilisé pour mettre à jour l'état
  • La bibliothèque,
     qrcode.react
    , est utilisé pour rendre le code QR généré
  • Ensuite, l'utilisation de la
     downloadQRCode
    fonction attachée à la
     onSubmit
    méthode de la
     <form>
    élément car il est déclenché par l'événement submit
  • Sur le
     <input>
    élément, le
     onChange
    gestionnaire d'événements avec la fonction
     'qrCodeEncoder'
    prend l'entrée des utilisateurs, obtient sa valeur et modifie le code QR à chaque nouvelle entrée saisie
  • Une variable
     qrcode
    est créé. Il prend dans le
     QRCodeCanvas
    composant et transmet certaines invites disponibles qui personnalisent et rendent le code QR visible sur le navigateur. Consultez la documentation pour en savoir plus sur l' utilisation des accessoires dans le composant
  • Finalement, le
     <button>
    l'élément est désactivé jusqu'à ce que l'entrée utilisateur reçoive des données

Styliser l'application QR Code

Dans le

 src
dossier, créer la feuille de style,
 styles.css
responsable de l'attrait visuel de l'application

Copiez et collez le code suivant :

 /* src/styles.css */
*, *:before, *:after { margin: 0 ;  padding : 0 ;  box-sizing : border-box; } :root { -- font - color : 230 35% 7% ; } body {  color : hsl ( var (--font-color)); } img {  max-width : 100% ;  display : block; } .section {  padding : 2em 0 ;  display : flex;  min-height : 100vh ;  align-items : center; } .container {  margin -inline: auto;  max-width : 75rem ;  width : 85% ; } .input__group {  display : flex;  margin-top : 2em ; } input {  width : 100% ;  padding : 1em 0.75em ;  border : 1px solid #444343 ;  border-radius : 3px ;  margin-bottom : 2em ;  margin-top : 0.75em ; } button {  border : unset;  background : hsl ( 231 , 77% , 90% );  padding : 1em 0.75em ;  color : hsl ( var (--font-color));  cursor : pointer;  text-transform : uppercase;  font-weight : bold; } @media screen and ( min-width : 768px ) {  .section {    padding : 0 ; }  input {    margin : 0 ; }  .qrcode__container {    display : flex;    align-items : center; }  .input__group {    margin-left : 3em ; }  input {    margin-bottom : 2em ;    margin-top : 0.75em ;    font-size : 1rem ; } }

Ensuite, importez le fichier QrCode.js et la feuille de style dans le point d'entrée de l'application, App.js :

 // src/App.js
import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) {  return (    < div className = "section container" >
      < QrCode />
    </ div >
 ); }

Une fois les étapes terminées, l'application devrait ressembler à ceci :

Téléchargement du code QR généré

La possibilité pour les utilisateurs de télécharger le code QR généré le rend utile dans une grande variété de cas d'utilisation. De l'impression du code à son intégration sur un site Web, les cas d'utilisation sont illimités.

De retour dans le

 components/QrCode.js
fichier, mettons à jour la base de code à utiliser
 refs
pour accéder aux nœuds du modèle d'objet de document (DOM).

 // src/components/QrCode.js
import { useState, useRef } from "react" ; // other import
const QrCode = () => {  const [url, setUrl] = useState( "" );  const qrRef = useRef(); // include this: call the useRef function
 ...  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div > {/* include this */}   {/* form input container */}    </ div >
 ); }; export default QrCode;

Maintenant, mettons à jour le

 downloadQRCode
fonction dans le
 QrCode.js
fichier pour pouvoir cliquer sur le bouton de téléchargement du code QR et enregistrer la toile en tant que fichier image.

 // src/components/QrCode.js
// imports
const QrCode = () => {  // state
  // useRef
  const downloadQRCode = ( e ) => {  e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" );  anchor.href = image;  anchor.download = `qr-code.png` ;    document .body.appendChild(anchor);  anchor.click();    document .body.removeChild(anchor);  setUrl( "" ); }; ...  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
   {/* form input container */}    </ div >
 ); }; export default QrCode;

Dans le

 downloadQRCode
fonction, ce qui suit se produit :

  • Il référence la valeur actuelle de l'objet ref avec la propriété .current pour savoir quand le nœud change
  • La
     qrcode.react
    Le composant produit l'élément canvas dans le DOM qui vous donne la possibilité de créer du contenu dynamiquement
  • La toile est annexée au
     toDataURL
    méthode avec le paramètre de type spécifié défini sur le format de fichier,
     image/png
  • Ensuite, l'ancre,
     <a>
    l'élément est créé et le
     href
    est défini sur l'image qui télécharge le code QR lorsque le bouton est cliqué
  • L'élément d'ancrage est ajouté au corps du document et une fois le code QR téléchargé, il est supprimé
  • Enfin, l'URL de l'état est mise à jour avec le
     setUrl
    variable qui efface l'entrée pour le code QR généré lorsque le formulaire est soumis

Le code complet du composant QrCode.js :

 import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const qrRef = useRef();  const downloadQRCode = ( e ) => { e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" ); anchor.href = image; anchor.download = `qr-code.png` ;    document .body.appendChild(anchor); anchor.click();    document .body.removeChild(anchor); setUrl( "" ); };  const qrCodeEncoder = ( e ) => { setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "} />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "https://hackernoon.com"
 />
          < button type = "submit" disabled = {!url} >
 Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

Le résultat final de l'application devrait ressembler à ceci :

Conclusion

Ce tutoriel décrit le processus de création d'un générateur de code QR et comment il peut être téléchargé pour une utilisation ultérieure.

Ressources