Build a Captcha Generator Using ReactJs

Create a QR code generator app using ReactJS

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:

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

@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:

mr-(6)

Build a Captcha Generator Using ReactJs

anomic30

Improve

Article Tags :

Similar Reads

Create a meme generator by using ReactJS

In this tutorial, weâ€™ll create a meme generator using ReactJS. In the meme generator, we have two text fields in which we enter the first textÂ and last text. After writing the text when we click theÂ GenÂ button, it creates a meme with an image and the text written on it. Preview Image: meme generator

Create a Camera App using React-Native

A camera app using react native is a mobile application that is designed to capture photos or videos using the built-in camera functionality of a mobile device. In this article, you will learn how you can create a camera app with simple steps.Output Preview: Let us have a look at how the final appli

Build a Captcha Generator Using ReactJs

A CAPTCHA generator is a tool that creates random and visually distorted text, requiring user input to prove they are human. It prevents automated bots from accessing websites or services by testing human comprehension. Our Captcha generator geÂnerates random text-baseÂd captchas that users must acc

Create a Chatbot App using React-Native

Creating a chatbot app using React Native will be an exciting project. In this article, we are going to implement a Chatbot App using React Native. Chatbot App is a mobile application that answers the user's questions on the basis of their previous learning or content provided by developers. It help

Create a Quiz App using ReactJS

In this article, we will create a quiz application to learn the basics of ReactJS. We will be using class components to create the application with custom and bootstrap styling. The application will start with questions at first and then the score will be displayed at last. Initially, there are only

Create a Blog App using React-Native

This article will help you make a simple blog app using React Native. The app lets users add, edit, and delete blog posts, making it easy to manage content. You will learn how to use different React Native features to create a user-friendly design that checks if the input is correct, making sure all

Create Memes Generator App using React-Native

The MeÂme Generator App is a mobileÂ application that allows users to effortlessly create memes. With its useÂr-friendly interface, useÂrs can choose from a wide collection of popular meÂme templates and add their own customized text to the top and bottom. In this article, we will see how we can bui

Create Jokes Generator App using React-Native

In this article, we are going to build a jokes generator app using react native. React Native enables you to master theÂ designing an elegant and dynamic useÂr interface while eÂffortlessly retrieving jokeÂs from external APIs. Let's take a look at how our completed project will lookPrerequisites /

Create a Coin Flipping App using ReactJS

In this article, we will build a coin flipping application. In which the user can flip a coin and get a random result from head or tails. We create three components 'App' and 'FlipCoin' and 'Coin'. The app component renders a single FlipCoin component only. FlipCoin component contains all the behind

Build a Random User Generator App Using ReactJS

In this article, we will create a random user generator application using API and React JS. A Random User Generator App Using React Js is a web application built with the React.js library that generates random user profiles. It typically retrieves and displays details like names, photos, and contact