Create a QR code generator app using ReactJS
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.
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.
Now, let’s edit the file named App.css to design our app.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: