Construire un générateur de code QR avec React

Introduction

Dans ce tutoriel, nous allons créer une application Web QR Code Generator à l'aide de React. Ce projet est idéal pour ceux qui cherchent à en savoir plus sur l'intégration d'API, la gestion de l'état et la génération de contenu dynamique.

Aperçu du projet

Le générateur de codes QR permet aux utilisateurs de créer des codes QR en saisissant du contenu, en ajustant la taille et en sélectionnant une couleur d'arrière-plan. Il utilise une API publique pour générer les codes QR et les affiche à l'écran. Les utilisateurs peuvent générer, afficher et télécharger des codes QR à diverses fins.

Caractéristiques

• Saisie de contenu : les utilisateurs peuvent saisir le contenu qu'ils souhaitent encoder dans un code QR.
• Taille dynamique : Ajustez la taille du code QR de manière dynamique.
• Personnalisation de la couleur d'arrière-plan : Choisissez une couleur d'arrière-plan pour le code QR.
• Intégration API : récupère les codes QR à partir d'une API publique de génération de codes QR.
• Option de téléchargement : permet aux utilisateurs de télécharger le code QR généré.

Technologies utilisées

• React : Pour créer l'interface utilisateur et gérer les états des composants.
• CSS : Pour styliser l'application.
• JavaScript : pour gérer les requêtes API et la logique des applications.

Structure du projet

Le projet est organisé comme suit :

├── public
├── src
│   ├── components
│   │   ├── QrCode.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Composants clés

• QrCode.jsx : Gère la génération et l'affichage du QR code.
• App.jsx : restitue la mise en page principale et le composant QrCode.

Explication du code

Composant QrCode

Le composant QrCode gère la logique de génération du QR code et gère l'affichage du QR code généré.

import { useState } from "react";
import axios from "axios";

const QrCode = () => {
  const [content, setContent] = useState("");
  const [size, setSize] = useState(300);
  const [bgColor, setBgColor] = useState("ffffff");
  const [qrCode, setQrCode] = useState(
    "https://api.qrserver.com/v1/create-qr-code/?data=QR%20Code%20Generator&size=300x300&bgcolor=ffffff"
  );

  const GenerateQR = () => {
    axios
      .get(
        `https://api.qrserver.com/v1/create-qr-code/?data=${content}&size=${size}x${size}&bgcolor=${bgColor}`
      )
      .then((res) => {
        setQrCode(res.config.url);
      });
  };

  return (
    <div className="qr-code">
      <div className="input-box">
        <div className="input-container">
          <input
            type="text"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder="Enter content"
          />
        </div>

        <div className="input-color">
          <h4>Background Color:</h4>
          <input
            type="color"
            value={`#${bgColor}`}
            onChange={(e) => setBgColor(e.target.value.substring(1))}
          />
        </div>
        <div className="input-dimension">
          <h4>Dimension:</h4>
          <input
            type="range"
            min="200"
            max="600"
            value={size}
            onChange={(e) => setSize(e.target.value)}
          />
        </div>
        <button className="generate-btn" onClick={GenerateQR}>
          Generate QR
        </button>
      </div>
      <div className="output-box">
        <div className="qr-image">
          {qrCode && <img src={qrCode} alt="Generated QR Code" />}
        </div>
        {qrCode && (
          <div className="download-btn">
            <a href={qrCode} download="QRCode.png">
              <button type="button">Download</button>
            </a>
          </div>
        )}
      </div>
    </div>
  );
};

export default QrCode;

Ce composant gère l'état du contenu du code QR, de la taille, de la couleur d'arrière-plan et de l'URL du code QR généré. Il récupère les codes QR de l'API et les affiche.

Composant d'application

Le composant App restitue le composant QrCode et fournit un en-tête et un pied de page pour la mise en page.

import QrCode from './components/QrCode'
import "./App.css"

const App = () => {
  return (
    <div className='app'>
      <div className="header">
        <h1>QR Code Generator</h1>
      </div>
      <QrCode />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
}

export default App;

Ce composant configure la mise en page globale et inclut le générateur de code QR.

Style CSS

Le CSS stylise l'application pour garantir une interface propre et conviviale.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #134b70;
  color: white;
}

.header {
  width: 100%;
  text-align: center;
}

.header h1 {
  font-size: 30px;
}

.qr-code {
  background-color: #000000;
  display: flex;
  align-items: flex-start;
  padding: 60px;
  gap: 100px;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  box-shadow: rgba(231, 231, 231, 0.35) 0px 5px 15px;
}

.input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.input-container,
.input-color,
.input-dimension {
  margin: 10px 0;
  gap: 40px;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  width: 450px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input[type="color"] {
  padding: 5px;
  width: 450px;
}

input[type="range"] {
  width: 450px;
}

.generate-btn {
  padding: 15px 40px;
  width: 450px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 50px;
}

.generate-btn:hover {
  background-color: #45a049;
}

.output-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-image img {
  border: 1px solid #000000;
}

.download-btn {
  margin-top: 20px;
}

.download-btn button {
  width: 300px;
  padding: 12px 40px;
  font-size: 16px;
  background-color: #1171b1;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.download-btn button:hover {
  background-color: #134b70;
}

.footer {
  width: 100%;
  padding: 20px;
  text-align: center;
}

Le style garantit une mise en page épurée avec des visuels conviviaux et un design réactif.

Installation et utilisation

Pour démarrer ce projet, clonez le référentiel et installez les dépendances :

git clone https://github.com/abhishekgurjar-in/qr_code_generator.git
cd qr-code-generator
npm install
npm start

Cela démarrera le serveur de développement et l'application s'exécutera sur http://localhost:3000.

Démo en direct

Découvrez la démo en direct du générateur de code QR ici.

Conclusion

Le projet QR Code Generator est un exemple pratique de la façon d'intégrer des API et de gérer du contenu dynamique dans React. Il fournit un outil simple mais efficace pour générer des codes QR avec une interface conviviale.

Crédits

• Inspiration : Le projet s'inspire de la nécessité de générer facilement des codes QR pour diverses applications.

Auteur

Abhishek Gurjar est un développeur Web passionné par la création d'applications Web interactives et utiles. Vous pouvez suivre son travail sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!