Create a QR code generator app using ReactJS (original) (raw)

Last Updated : 25 Jul, 2024

In this article, we will create a simple QR Code generator app. A QR code is a two-dimensional barcode that can be read by smartphones. It allows the encoding of more than 4,000 characters in a compact format. QR codes can be used for various purposes, such as displaying text to users, opening URLs, storing contact information in an address book, or sending messages.

**Prerequisites:

• React
• Functional Components
• React Hooks
• Javascript ES6

**Approach:

Our app consists of two sections. In the first section, we will collect user inputs such as the text to encode, the size of the QR code, and the background color of the QR code, and store these inputs in state variables. Subsequently, we will construct the necessary API string to fetch the QR code image. In the second section, we will display the generated 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:.

**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 (

QR Code Generator

<input type="text" onChange={ (e) => {setTemp(e.target.value)}} placeholder="Enter text to encode" /> Generate

Background Color:

<input type="color" onChange={(e) => { setBgColor(e.target.value.substring(1)) }} />

Dimension:

<input type="range" min="200" max="600" value={size} onChange={(e) => {setSize(e.target.value)}} />

Download

export default App;

``

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

CSS `

@import url('http://fonts.cdnfonts.com/css/lilly'); .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: