How To Create QRCode Using Ant Design UI In ReactJS

Introduction

An enterprise-class UI design language and React UI library with high-quality React components, one of the best React UI libraries for enterprises.

A QR Code is a type of two-dimensional barcode that is used to store small amounts of text or data. Here we will learn how to create a QR code using Ant Design UI with React Js and type script. 

Preconditions

  • Javascript
  • Basic knowledge of React js
  • Node.js
  • V.S. Code,Visual Studio
  • typescript

We cover the below things in this article: 

  • Create React application
  • Installation of Ant Design UI
  • How to create a QR Code of Ant Design UI in React js.

Here we will follow the steps for creating a QR code.

Step 1. Run the below command to create a React.js project.

npx create-react-app my-app --template typescript

Step 2. Run the below commandto installg Ant Design UI.

npm i @ant-design/icons
npm i antd

Create the files according to the below image

App.js

.Step 3. Add the below code in the App.tsx

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { QRCode, Button } from 'antd';

function App() {
  const [size, setSize] = useState<number>(160);

  const increase = () => {
    setSize((prevSize) => {
      const newSize = prevSize + 10;
      if (newSize > 300) {
        return 300;
      }
      return newSize;
    });
  };

  const decline = () => {
    setSize((prevSize) => {
      const newSize = prevSize - 10;
      if (newSize < 48) {
        return 48;
      }
      return newSize;
    });
  };

  return (
    <>
      <Button.Group style={{ marginBottom: 16 }}>
        <Button onClick={decline} disabled={size <= 48} icon={<MinusOutlined />}>
          Smaller
        </Button>
        <Button onClick={increase} disabled={size >= 300} icon={<PlusOutlined />}>
          Larger
        </Button>
      </Button.Group>
      <QRCode
        errorLevel="H"
        size={size}
        iconSize={size / 4}
        value="https://ant.design/"
        icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
    </>
  );
};

export default App;

Step 4. Add the below code in package.json

{
  "name": "qrcodeappant",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^5.1.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.34",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.2.4",
    "antd": "^5.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Step 5. Run the below command to run the application.

npm start

After running this command, we will get this QR code.

QR Code

Summary

This article taught us how to create a QR code using Ant Design UI with React Js and type script.


Similar Articles