ReactJS Barcode Scanner

Thanks to the Scanbot Web Barcode Scanner SDK’s Ready-to-Use UI Components, you can add barcode scanning functionalities to your website or web app in a matter of minutes.

To create a simple web app, first install the scanbot-web-sdk package with the following command:

npm i scanbot-web-sdk

Copy the SDK’s WebAssembly binaries from node_modules to wasm in the public asset directory using the following command:

mkdir -p public/wasm && cp -r node_modules/scanbot-web-sdk/bundle/bin/barcode-scanner/* public/wasm

Then initialize the SDK in App.tsx.

import { useEffect } from "react";
import ScanbotSDK from 'scanbot-web-sdk/ui';

const App = () => {
  useEffect(() => {
    const init = async () => {
      await ScanbotSDK.initialize({
        licenseKey: "",
        enginePath: '/wasm/'
      });
    };

    init();
  }, []);

  return <></>;
}

You can configure the barcode scanner like this:

const startScanner = async () => {
  const config = new ScanbotSDK.UI.Config.BarcodeScannerScreenConfiguration();

  const result = await ScanbotSDK.UI.createBarcodeScanner(config);

  return result;
}

To trigger the scanner with a button press, add a button and assign the startScanner function to its onClick event:

return (
  <div>
    <button onClick={startScanner}>Start Scanner</button>
  </div>
);

Set the value of scanResult within the startScanner function when the scanning results are returned. You can display those results below the button.

Your App.tsx should look like this:

import { useEffect, useState } from "react";
import ScanbotSDK from "scanbot-web-sdk/ui";

const App = () => {
  const [scanResult, setScanResult] = useState<string>("");

  useEffect(() => {
    const init = async () => {
      await ScanbotSDK.initialize({
        licenseKey: "",
        enginePath: "/wasm/"
      });
    };

    init();
  }, []);

  const startScanner = async () => {
    const config = new ScanbotSDK.UI.Config.BarcodeScannerScreenConfiguration();

    const result = await ScanbotSDK.UI.createBarcodeScanner(config);

    if (result && result.items.length > 0) {
      setScanResult(result.items[0].barcode.text);
    }

    return result;
  }

  return (
    <div>
      <button onClick={startScanner}>Start Scanner</button>
      {scanResult && <div>{scanResult}</div>}
    </div>
  );
};

export default App;

With this setup, you now have a fully functional barcode scanner! Check out our comprehensive, step-by-step tutorial that guides you through the entire process of how to build a React.js Barcode Scanner web app with TypeScript and Vite.