How to integrate QRcode scanner in react (Updated 2024)

97

Integrating a QR code scanner into a React application can significantly enhance its interactivity and functionality, providing users with a seamless way to access content, authenticate, or even make payments. In this detailed guide, we’ll cover the process step-by-step, complete with code snippets, to help you implement a QR code scanner in your React app effectively as of 2024.

Prerequisites

Ensure you have the following before starting:

• Node.js installed on your system.
• Basic knowledge of React.js.
• An existing React application (create one using create-react-app if needed).

Steps to integrate QRcode scanner in React Application

Step 1: Setting Up Your Project

If you don’t already have a React app, set one up using Create React App by running:

npx create-react-app react-qr-scanner
cd react-qr-scanner

Step 2: Installing the QR Code Scanner Library

We’ll use react-qr-scanner, an updated and efficient library for QR code scanning. Install it via npm:

npm install react-qr-scanner

Step 3: Creating the Scanner Component

Create a new component QRScanner.js in your project’s src directory. Here’s how you set up a basic scanner:

import React, { useState } from 'react';
import { QrReader } from 'react-qr-scanner';

const QRScanner = () => {
  const [data, setData] = useState('No result');

  const handleScan = (result) => {
    if (result) {
      setData(result);
    }
  };
 
  const handleError = (error) => {
    console.error(error);
  };

  return (
    <div>
      <QrReader
        delay={300}
        onError={handleError}
        onScan={handleScan}
        style={{ width: '100%' }}
      />
      <p>{data}</p>
    </div>
  );
};

export default QRScanner;

Step 4: Incorporating the Scanner into Your App

In your App.js, import the QRScanner component and include it in your app’s component tree:

import React from 'react';
import './App.css';
import QRScanner from './QRScanner';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <QRScanner />
      </header>
    </div>
  );
}

export default App;

Step 5: Running Your Application

Start your application by running npm start. Point your QR code in front of the camera to test the scanning functionality.

Conclusion

You’ve successfully integrated a QR code scanner into your React application. This feature can be incredibly useful for a wide range of applications, from event check-ins to contactless payments. Experiment with the react-qr-scanner library’s options to customize the scanner according to your needs.

QRcode scanner – FAQ