插件窝干货文章使用 React 构建二维码生成器

使用 React 构建二维码生成器

二维码 strong div gt 60 来源： 2024-10-20

介绍

在本教程中，我们将使用 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 = () =&gt; {
  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&amp;size=300x300&amp;bgcolor=ffffff"
  );

  const generateqr = () =&gt; {
    axios
      .get(
        `https://api.qrserver.com/v1/create-qr-code/?data=${content}&amp;size=${size}x${size}&amp;bgcolor=${bgcolor}`
      )
      .then((res) =&gt; {
        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"
          /&gt;
        </div>

        <div classname="input-color">
          <h4>background color:</h4>
          <input type="color" value="{`#${bgcolor}`}" onchange="{(e)"> setbgcolor(e.target.value.substring(1))}
          /&gt;
        </div>
        <div classname="input-dimension">
          <h4>dimension:</h4>
          <input type="range" min="200" max="600" value="{size}" onchange="{(e)"> setsize(e.target.value)}
          /&gt;
        </div>
        <button classname="generate-btn" onclick="{generateqr}">
          generate qr
        </button>
      </div>
      <div classname="output-box">
        <div classname="qr-image">
          {qrcode &amp;&amp; @@##@@}
        </div>
        {qrcode &amp;&amp; (
          <div classname="download-btn">
            <a href="%7Bqrcode%7D" 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 = () =&gt; {
  return (
    <div classname="app">
      <div classname="header">
        <h1>qr code generator</h1>
      </div>
      <qrcode></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(null, 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 上关注他的工作。

    <img src="%7Bqrcode%7D" alt="generated qr code">

上一篇：使用 React 构建歌词查找器应用程序

下一篇：使用 TailwindCSS 实现文本阴影