The React framework is supported by Scandit technology and the purpose of the following article is to facilitate the integration and setting up of your React application alongside Scandit SDK.

Create a new project (optional)

If you still do not have a React project that you will use, you should create a new one.

$ npx create-react-app helloscandit

$ cd helloscandit

Add needed Scandit plugins

Add the Core and Barcode plugins (as described in our documentation).

$ npm install scandit-web-datacapture-core

$ npm install scandit-web-datacapture-barcode

You also need to add the library engine files and provide an appropriate path under the `libraryLocation` parameter.

You can either add needed files locally or use CDN. For the purpose of this guide, we'll copy these files (js+wasm) from `helloscandit/node_modules/scandit-web-datacapture-barcode/build/engine` to a newly created folder under `public/engine` and then reference it, as shown in the below code snippet.

Create a new component

Create a new folder called `components` under `src`. Inside the newly created folder, create a new file called `Scanner.js`. Then open the file and use the below code snippet:

import * as SDCCore from 'scandit-web-datacapture-core';
import * as SDCBarcode from 'scandit-web-datacapture-barcode';
import { useEffect } from 'react';

const licenseKey = "YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE";

 const Scanner = () => {
   useEffect(() => {
     async function runScanner() {
       await SDCCore.configure({
       licenseKey: licenseKey,
       libraryLocation: process.env.PUBLIC_URL + '/engine',
       moduleLoaders: [SDCBarcode.barcodeCaptureLoader()]
     });

     const context = await SDCCore.DataCaptureContext.create();

     const camera = SDCCore.Camera.default;
     await context.setFrameSource(camera);

     const settings = new SDCBarcode.BarcodeCaptureSettings();
     settings.enableSymbologies([
       SDCBarcode.Symbology.Code128,
       SDCBarcode.Symbology.Code39,
       SDCBarcode.Symbology.QR,
       SDCBarcode.Symbology.EAN8,
       SDCBarcode.Symbology.UPCE,
       SDCBarcode.Symbology.EAN13UPCA
     ]);

     const symbologySetting = settings.settingsForSymbology(SDCBarcode.Symbology.Code39);
     symbologySetting.activeSymbolCounts = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

     const barcodeCapture = await SDCBarcode.BarcodeCapture.forContext(context, settings);
     await barcodeCapture.setEnabled(false);

     barcodeCapture.addListener({
       didScan: async (barcodeCapture, session) => {
         await barcodeCapture.setEnabled(false);
         const barcode = session.newlyRecognizedBarcodes[0];
         const symbology = new SDCBarcode.SymbologyDescription(barcode.symbology);
         showResult(barcode.data, symbology.readableName);
         await barcodeCapture.setEnabled(true);
       },
     });

     const view = await SDCCore.DataCaptureView.forContext(context);
     view.connectToElement(document.getElementById("data-capture-view"));
     view.addControl(new SDCCore.CameraSwitchControl()); 

     const barcodeCaptureOverlay = 
       await SDCBarcode.BarcodeCaptureOverlay.withBarcodeCaptureForViewWithStyle(
       barcodeCapture,
       view,
       SDCBarcode.BarcodeCaptureOverlayStyle.Frame
     );

     const viewfinder = new SDCCore.RectangularViewfinder(
       SDCCore.RectangularViewfinderStyle.Square,
       SDCCore.RectangularViewfinderLineStyle.Light
     );

     await barcodeCaptureOverlay.setViewfinder(viewfinder); 

     await camera.switchToDesiredState(SDCCore.FrameSourceState.On);
     await barcodeCapture.setEnabled(true);
  }

  function showResult(data, symbology) {
    alert("Scanned: "+data+" "+symbology);
  }

  runScanner().catch((error) => {
    console.error(error);
    alert(error);
    });
  }, []);

  return(
    <div id="data-capture-view"></div>
  )

};

export default Scanner;

Reference Scanner component

Add the newly created Scanner component to the `App.js` file so it's displayed when app is run:

...
import Scanner from './components/Scanner';

function App() {
 return (
   <Scanner />
 );
}

export default App;

Set the license key

Replace the `YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE` string with your web license key under `src/components/Scanner.js`.

Run the app

Run the app with `npm start`. At this point you should be able to see a working scanner at `localhost:3000`.