Skip to content
Related Articles

Related Articles

Improve Article

Create a QR code generator app using ReactJS

  • Last Updated : 27 Aug, 2021
Geek Week

Introduction: In this article, we are going to make a simple QR Code generator app. QR code is a two-dimensional barcode readable on smartphones. Allows coding of more than 4000 characters in a double-barcode bar. QR codes can be used to show text to a user, to open a URL, to keep contact in an address book or to write messages.

Prerequisites: The pre-requisites for this project are:

Approach: Our app contains two sections. In one section we will take the user inputs such as the text to encode, size of QR code, background color of QR code, and store all of that inside state variables. After that, we will build the required API string to fetch the QR code image. In the other section, we will display the required QR code 

 



Creating a React application:

Step 1: Create a react application by typing the following command in the terminal.

npx create-react-app qrcode-gen

Step 2: Now, go to the project folder i.e qrcode.gen by running the following command.

cd qrcode-gen

Project Structure: It will look like the following.

Example: Here App.js is the only default component of our app that contains all the logic. We will be using a free opensource (no auth requires) API called ‘create-qr-code’ to fetch the required QR code image. We will also have a button to download the QR code image. 

Now write down the following code in the App.js file.

Javascript




import { useEffect, useState } from 'react';
import './App.css';
  
function App() {
  const [temp, setTemp] = useState("");
  const [word, setWord] = useState("");
  const [size, setSize] = useState(400);
  const [bgColor, setBgColor] = useState("ffffff");
  const [qrCode, setQrCode] = useState("");
  
  // Changing the URL only when the user
  // changes the input
  useEffect(() => {
    setQrCode
 (`http://api.qrserver.com/v1/create-qr-code/?data=${word}!&size=${size}x${size}&bgcolor=${bgColor}`);
  }, [word, size, bgColor]);
  
  // Updating the input word when user
  // click on the generate button
  function handleClick() {
    setWord(temp);
  }
  
  return (
    <div className="App">
      <h1>QR Code Generator</h1>
      <div className="input-box">
        <div className="gen">
          <input type="text" onChange={
            (e) => {setTemp(e.target.value)}}
            placeholder="Enter text to encode" />
          <button className="button" 
            onClick={handleClick}>
            Generate
          </button>
        </div>
        <div className="extra">
          <h5>Background Color:</h5>
          <input type="color" onChange={(e) => 
          { setBgColor(e.target.value.substring(1)) }} />
          <h5>Dimension:</h5>
          <input type="range" min="200" max="600"
           value={size} onChange={(e) => 
           {setSize(e.target.value)}} />
        </div>
      </div>
      <div className="output-box">
        <img src={qrCode} alt="" />
        <a href={qrCode} download="QRCode">
          <button type="button">Download</button>
        </a>
      </div>
    </div>
  );
}
  
export default App;

Now, let’s edit the file named App.css to design our app.

CSS




.App{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding-top: 30px;
}
h1{
  font-family: 'Lilly', sans-serif;
  font-size: 50px;
}
.gen input{
  height: 35px;
  width: 250px;
  font-size: 20px;
  padding-left: 5px;
}
button{
  position: relative;
  height: 38px;
  width: 100px;
  top: -2px;
  font-size: 18px;
  border: none;
  color: whitesmoke;
  background-color: forestgreen;
  box-shadow: 2px 2px 5px rgb(74, 182, 74);
  cursor: pointer;
}
button:active{
  box-shadow: none;
}
.extra{
  padding-top: 20px;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
.output-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :