使用 React 构建二维码生成器

介绍

在本教程中，我们将使用 React 创建一个 QR 代码生成器 Web 应用程序。对于那些希望了解集成 API、管理状态和生成动态内容的人来说，该项目是理想的选择。

项目概况

二维码生成器允许用户通过输入内容、调整大小和选择背景颜色来创建二维码。它利用公共 API 生成 QR 码并将其显示在屏幕上。用户可以出于各种目的生成、查看和下载二维码。

特征

• 内容输入：用户可以输入想要编码成二维码的内容。
• 动态大小：动态调整二维码的大小。
• 背景颜色自定义：选择二维码的背景颜色。
• API 集成：从公共二维码生成 API 获取二维码。
• 下载选项：允许用户下载生成的二维码。

使用的技术

• React：用于构建用户界面和管理组件状态。
• CSS：用于设计应用程序的样式。
• JavaScript：用于处理 API 请求和应用程序逻辑。

项目结构

项目组织如下：

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

关键部件

• QrCode.jsx：管理QR码生成和显示。
• App.jsx：渲染主布局和 QrCode 组件。

代码说明

二维码组件

QrCode 组件处理 QR 码生成逻辑并管理生成的 QR 码的显示。

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;

该组件管理 QR 码内容、大小、背景颜色和生成的 QR 码 URL 的状态。它从 API 获取 QR 码并显示它们。

应用程序组件

App 组件渲染 QrCode 组件并为布局提供页眉和页脚。

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;

该组件设置整体布局并包含 QR 代码生成器。

CSS 样式

CSS 设计应用程序以确保界面干净且用户友好。

* {
  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;
}

样式确保布局简洁，具有用户友好的视觉效果和响应式设计。

安装与使用

要开始此项目，请克隆存储库并安装依赖项：

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

这将启动开发服务器，并且应用程序将在 http://localhost:3000 上运行。

现场演示

在此处查看二维码生成器的现场演示。

结论

QR Code Generator 项目是如何在 React 中集成 API 和管理动态内容的实际示例。它提供了一个简单而有效的工具来生成二维码，具有用户友好的界面。

制作人员

• 灵感：该项目的灵感来自于为各种应用程序轻松生成二维码的需求。

作者

Abhishek Gurjar 是一位 Web 开发人员，热衷于创建交互式且有用的 Web 应用程序。您可以在 GitHub 上关注他的工作。

以上是使用 React 构建二维码生成器的详细内容。更多信息请关注PHP中文网其他相关文章！