57,362 lectures

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

par Teri Eyenike8m2022/07/01

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

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

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

Node >= 14.0.0 et npm >= 5.6 installé sur votre machine locale

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

QR Code

L'élément d'ancrage

Tout savoir sur le code QR

L O A D I N G
. . . comments & more!

About Author

Teri Eyenike@terieyenike

I am a frontend developer with a particular interest in making things simple and usable.

Read my stories Book a call with @terieyenike