Quagga 2 Implementation in Typescript

Scanner.tsx

import React, { useRef, useState } from "react"
import styled from "styled-components"
import useScanner from "./useScanner"
import type { QuaggaJSResultObject } from "@ericblade/quagga2"

interface ScannerProps extends React.HTMLAttributes<HTMLDivElement> {
  active: boolean
  onResults: any
}

export default function Scanner({ active, onResults, ...rest }: ScannerProps) {
  const [ isScanning, setIsScanning ] = useState<boolean>(true)
  const scannerRef = useRef(null)

  const onDetectedHandler = (results: QuaggaJSResultObject) => {
    setIsScanning(false)
    onResults(results)
  }

  // Injects the scanner into the ref.
  useScanner(active, onDetectedHandler, () => null, scannerRef)

  return isScanning ? <ScannerWrapper {...rest} ref={scannerRef}/> : null
}

const ScannerWrapper = styled.div`
  max-height: 100vh;
  overflow: hidden;
`

useScanner.ts

import Quagga, { QuaggaJSConfigObject } from "@ericblade/quagga2"
import { useEffect } from "react"

// todo: set correct types.
type useScannerTypes = {
  readonly onError: any
  readonly onDetected: any
  scannerRef: any
}

export default function useScanner(
  active: boolean,
  onDetected: useScannerTypes["onDetected"],
  onError: useScannerTypes["onError"],
  scannerRef: useScannerTypes["scannerRef"]) {
  useEffect(() => {
    const config: QuaggaJSConfigObject = {
      inputStream: {
        constraints: {
          // For some reason, the width and height fields affect their counterparts, so the below fixes that.
          // noinspection JSSuspiciousNameCombination
          width: window.outerHeight,
          height: window.innerWidth,
          facingMode: "environment"
        },
        name: "Live",
        target: scannerRef.current,
        type: "LiveStream"
      },
      locate: false,
      frequency: 1,
      decoder: {
        readers: [ "upc_reader" ],
        debug: {
          drawBoundingBox: true,
          showFrequency: true,
          drawScanline: true,
          showPattern: true
        },
        multiple: false
      }
    }

    Quagga.init({ ...config })
      .then(() => Quagga.start())
      .catch(err => onError(err))

    active && Quagga.onDetected(onDetected)

    return () => {
      Quagga.stop()
        .catch(() => null)
      Quagga.offDetected()
    }
  }, [ active, scannerRef ])
}