Using Quagga2 with React

This tutorial shows how to integrate Quagga2 into a React application.

Installation

npm install @ericblade/quagga2

Basic Component

import React, { useEffect, useRef, useCallback } from 'react';
import Quagga from '@ericblade/quagga2';

function BarcodeScanner({ onDetected }) {
  const scannerRef = useRef(null);

  const handleDetected = useCallback((result) => {
    if (result.codeResult) {
      onDetected(result.codeResult.code);
    }
  }, [onDetected]);

  useEffect(() => {
    Quagga.init({
      inputStream: {
        type: 'LiveStream',
        target: scannerRef.current,
        constraints: {
          facingMode: 'environment'
        }
      },
      decoder: {
        readers: ['code_128_reader', 'ean_reader']
      }
    }, (err) => {
      if (err) {
        console.error('Failed to initialize:', err);
        return;
      }
      Quagga.start();
    });

    Quagga.onDetected(handleDetected);

    return () => {
      Quagga.offDetected(handleDetected);
      Quagga.stop();
    };
  }, [handleDetected]);

  return <div ref={scannerRef} style= />;
}

export default BarcodeScanner;

Usage

import BarcodeScanner from './BarcodeScanner';

function App() {
  const handleScan = (code) => {
    console.log('Scanned:', code);
    alert(`Barcode: ${code}`);
  };

  return (
    <div>
      <h1>Scan a Barcode</h1>
      <BarcodeScanner onDetected={handleScan} />
    </div>
  );
}

With Hooks

Create a reusable hook:

import { useEffect, useRef, useState } from 'react';
import Quagga from '@ericblade/quagga2';

export function useQuagga(config = {}) {
  const scannerRef = useRef(null);
  const [scanning, setScanning] = useState(false);
  const [result, setResult] = useState(null);

  useEffect(() => {
    if (!scannerRef.current) return;

    Quagga.init({
      inputStream: {
        type: 'LiveStream',
        target: scannerRef.current,
        ...config.inputStream
      },
      decoder: {
        readers: ['code_128_reader'],
        ...config.decoder
      },
      ...config
    }, (err) => {
      if (!err) {
        Quagga.start();
        setScanning(true);
      }
    });

    Quagga.onDetected((data) => {
      setResult(data.codeResult);
    });

    return () => {
      Quagga.stop();
      setScanning(false);
    };
  }, []);

  return { scannerRef, scanning, result };
}

Stop on Detection

function SingleScanComponent({ onComplete }) {
  const scannerRef = useRef(null);

  useEffect(() => {
    Quagga.init({
      inputStream: {
        type: 'LiveStream',
        target: scannerRef.current
      },
      decoder: {
        readers: ['ean_reader']
      }
    }, (err) => {
      if (!err) Quagga.start();
    });

    const handleDetected = (result) => {
      Quagga.stop();
      onComplete(result.codeResult.code);
    };

    Quagga.onDetected(handleDetected);

    return () => {
      Quagga.offDetected(handleDetected);
      Quagga.stop();
    };
  }, [onComplete]);

  return <div ref={scannerRef} />;
}

Resources

← Back to Tutorials