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

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 installé sur votre machine locale Node >= 14.0.0 et npm >= 5.6 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 en utilisant la commande ci-dessous pour prévisualiser l'application dans le navigateur : http://localhost:3000 npm start cd qrcode-generator 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 : Un composant React pour générer des codes QR pour le rendu dans le DOM. qrcode.react 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 : e.preventDefault(); }; setUrl(e.target.value); }; ); ); }; // src/components/QrCode.js import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const downloadQRCode = ( e ) => { setUrl( "" ); const qrCodeEncoder = ( e ) => { const qrcode = ( return ( {qrcode} Enter URL Download QR code export default QrCode; Les extraits de code ci-dessus effectuent les opérations suivantes : Importer est utilisé pour déclarer l'état initial de la variable, url qui est définie sur une chaîne vide, et le fonction, utilisé pour mettre à jour l'état useState setState setUrl La bibliothèque, , est utilisé pour rendre le code QR généré qrcode.react Ensuite, l'utilisation de la fonction attachée à la méthode de la élément car il est déclenché par l'événement submit downloadQRCode onSubmit Sur le élément, le gestionnaire d'événements avec la fonction prend l'entrée des utilisateurs, obtient sa valeur et modifie le code QR à chaque nouvelle entrée saisie onChange 'qrCodeEncoder' Une variable est créé. Il prend dans le 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' dans le composant qrcode QRCodeCanvas utilisation des accessoires Finalement, le 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 dossier, créer la feuille de style, responsable de l'attrait visuel de l'application src styles.css Copiez et collez le code suivant : *, *:before, *:after { } } } } } } } } } } } } } } } /* src/styles.css */ 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 ( 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 fichier, mettons à jour la base de code à utiliser pour accéder aux nœuds du modèle d'objet de document (DOM). components/QrCode.js refs ... ); ); }; // 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 = ( return ( {qrcode} {/* include this */} {/* form input container */} export default QrCode; Maintenant, mettons à jour le fonction dans le fichier pour pouvoir cliquer sur le bouton de téléchargement du code QR et enregistrer la toile en tant que fichier image. downloadQRCode QrCode.js e.preventDefault(); anchor.href = image; anchor.click(); }; ... ); }; // src/components/QrCode.js // imports const QrCode = () => { // state // useRef const downloadQRCode = ( e ) => { let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.download = `qr-code.png` ; document .body.appendChild(anchor); document .body.removeChild(anchor); setUrl( "" ); return ( {qrcode} {/* form input container */} export default QrCode; Dans le fonction, ce qui suit se produit : downloadQRCode Il référence la valeur actuelle de l'objet ref avec la propriété .current pour savoir quand le nœud change La Le composant produit l'élément canvas dans le DOM qui vous donne la possibilité de créer du contenu dynamiquement qrcode.react La toile est annexée au méthode avec le paramètre de type spécifié défini sur le format de fichier, toDataURL image/png Ensuite, l'ancre, l'élément est créé et le est défini sur l'image qui télécharge le code QR lorsque le bouton est cliqué href 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 variable qui efface l'entrée pour le code QR généré lorsque le formulaire est soumis setUrl Le code complet du composant QrCode.js : e.preventDefault(); anchor.href = image; anchor.click(); }; setUrl(e.target.value); }; ); ); }; import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const qrRef = useRef(); const downloadQRCode = ( e ) => { let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.download = `qr-code.png` ; document .body.appendChild(anchor); document .body.removeChild(anchor); setUrl( "" ); const qrCodeEncoder = ( e ) => { const qrcode = ( return ( {qrcode} Enter URL Download QR code 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