Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
Dev Center
Table of contents

Use DWT with React

React is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement DWT in a React application.

Preparation

Make sure you have node and yarn installed. node 14.4.0 and yarn 1.22.4 are used in the example below.

Create the Sample Project

Create a Bootstrapped Raw React Application

npx create-react-app dwt-react

CD to the root directory of the application and install the dwt and ncp package

yarn add dwt
yarn add ncp

ncp is used to copy static resources files.

Configure the Project

Open package.json and change scripts like this:

"scripts": {
    "start": "ncp node_modules/dwt/dist public/dwt-resources && react-scripts start",
    "build": "react-scripts build && ncp node_modules/dwt/dist build/dwt-resources",
    "test": "ncp node_modules/dwt/dist public/dwt-resources && react-scripts test",
    "eject": "react-scripts eject"
},

The change ensures the static files required to run DWT are copied over to the built project.

Implementation

Generate a Component

Under /src/, create a new JavaScript file and name it dwt.js.

Edit the Component

  • Copy the following to the newly created dwt.js.
import React from 'react';
import Dynamsoft from 'dwt';

export default class DWT extends React.Component {
    constructor(props) {
        super(props);
    }
    DWObject = null;
    containerId = 'dwtcontrolContainer';
    componentDidMount() {
        Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', () => {
            this.Dynamsoft_OnReady()
        });
        Dynamsoft.WebTwainEnv.ProductKey = 'YOUR-PRODUCT-KEY';
        Dynamsoft.WebTwainEnv.ResourcesPath = "/dwt-resources";
        Dynamsoft.WebTwainEnv.Containers = [{
            WebTwainId: 'dwtObject',
            ContainerId: this.containerId,
            Width: '300px',
            Height: '400px'
        }];
        Dynamsoft.WebTwainEnv.Load();
    }
    Dynamsoft_OnReady() {
        this.DWObject = Dynamsoft.WebTwainEnv.GetWebTwain(this.containerId);
    }
    acquireImage() {
        this.DWObject.AcquireImage();
    }
    render() {
        return (<>
            <button onClick = {() => this.acquireImage()} > Scan </button> 
            <div id = {this.containerId}> </div> 
            </>
        );
    }
}

Note:

  • containerId specifies the DIV to create DWT viewer in which is defined in the template.
  • OnWebTwainReady is the callback triggered when the initialization succeeds.
  • ProductKey must be set to a valid trial or full key.
  • ResourcesPath points to the location of the static files mentioned in Configure the project.

Add the Component to App.js

import React from 'react';
import './App.css';
import DWT from './dwt';

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

export default App;

Run the Application

yarn start

If you have installed DWT and have configured a valid ProductKey, you will have a working page to scan documents from your scanner now. Otherwise, you should see instructions on the page that guide you to install the library. More info».

Official Samples

Check out the following two sample projects:

Is this page helpful?

YesYes NoNo

In this article:

version 16.2

  • Latest Version
  • Version 17.2.1
  • Version 17.1.1
  • Version 17.0
  • Version 16.2
  • Version 16.1.1
Change +
© 2003–2022 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support