@impactdk/react-barcode-scanner

@impactdk/react-barcode-scanner

A barcode scanner for react, using a webassembly module built on ZBar, which supports a variety of different barcodes. Uses @impactdk/barcode-scanner underneath.

Installation

npm install --save @impactdk/react-barcode-scanner

As the default decoder for the scanner is dependant on a wasm module running in a worker, some assets need to be installed from the module and into the public assets of your own. It is advised to do this as part of your build:

install-wasm-decoder ./path/to/your/assets

A path to a public directory where the installed assets are available is then needed later in the configuration of the default decoder (if used).

Using the module

import { WasmDecoder } from "@impactdk/barcode-scanner";
import { ReactBarcodeScanner } from "@impactdk/react-barcode-scanner";

export const BarcodeScanner = () => {
  const { current: decoder } = useRef(WasmDecoder.getInstance("/public-assets")); // Path to assets installed.

  function handleBarcode(barcode: string): void {
    // Do something...
  }

  return <ReactBarcodeScanner
    decoder={decoder}
    onFindBarcode={handleBarcode} />
}

Code splitting

Include the submodule that checks the user's client for support, then lazily import a module using the scanner.

// barcode-scanner.lazy.tsx
import { isBarcodeScannerSupported } from "@impactdk/barcode-scanner/lazy";

interface IBarcodeScannerProps {
  onFindBarcode: (barcode: string) => void;
}

const BarcodeScanner = memo((props: IBarcodeScannerProps) => {
  if (!isBarcodeScannerSupported) {
    return <div>Barcode scanner not supported...</div>;
  }

  const { onFindBarcode } = props;
  const LazyScanner = lazy(() => import("./lazy-compat-scanner.component")); // This enables code splitting.
  const fallback = <div>Scanner loading...</div>;

  return (
    <Suspense fallback={fallback}>
      <LazyScanner onFindBarcode={onFindBarcode} />
    </Suspense>
  );
});

// lazy-compat-scanner.component.tsx
import { WasmDecoder } from "@impactdk/barcode-scanner";
import { ReactBarcodeScanner, IReactBarcodeScannerProps } from "@impactdk/react-barcode-scanner";

type ILazyCompatScannerProps = Omit<IReactBarcodeScannerProps, "decoder">;

const LazyCompatScanner: FC<ILazyCompatScannerProps> = props => {
  const { current: decoder } = useRef(WasmDecoder.getInstance("/public-assets")); // Path to assets installed.

  return <ReactBarcodeScanner
    decoder={decoder}
    {...props} />
}

export default LazyCompatScanner;