Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

Create a QR code generator app using ReactJS

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


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(() => {
  }, [word, size, bgColor]);
  // Updating the input word when user
  // click on the generate button
  function handleClick() {
  return (
    <div className="App">
      <h1>QR Code Generator</h1>
      <div className="input-box">
        <div className="gen">
          <input type="text" onChange={
            (e) => {setTemp(}}
            placeholder="Enter text to encode" />
          <button className="button" 
        <div className="extra">
          <h5>Background Color:</h5>
          <input type="color" onChange={(e) => 
          { setBgColor( }} />
          <input type="range" min="200" max="600"
           value={size} onChange={(e) => 
           {setSize(}} />
      <div className="output-box">
        <img src={qrCode} alt="" />
        <a href={qrCode} download="QRCode">
          <button type="button">Download</button>
export default App;

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


  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding-top: 30px;
  font-family: 'Lilly', sans-serif;
  font-size: 50px;
.gen input{
  height: 35px;
  width: 250px;
  font-size: 20px;
  padding-left: 5px;
  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;
  box-shadow: none;
  padding-top: 20px;
  display: flex;
  justify-content: space-around;
  gap: 10px;
  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:

My Personal Notes arrow_drop_up
Last Updated : 27 Aug, 2021
Like Article
Save Article
Similar Reads
Related Tutorials