React: Make Document Scan App with Dynamic Web TWAIN

Last week, I shared how to load a global JavaScript library dynamsoft.webtwain.min.js in React. Now it is time to use the library to build a simple app. I hope this tutorial will be handy for Dynamic Web TWAIN developers.

Building Document Scanning App with React

Initialize and configure project

Create and initialize a React application:

npm install -g create-react-app
create-react-app document-scan
cd document-scan

Install Dynamic Web TWAIN and corresponding TypeScript declaration file:

npm install dwt –save
npm install @types/dwt –save

To build and run a React app, you need a wepack.config.js file. For the project created by create-react-app, it will load node_modules\react-scripts\config\webpack.config.dev.js when running “npm start”.

Install script-loader for loading global JavaScript library:

npm install script-loader --save

Add the rule to webpack.config.dev.js:

{
    test: /\.js$/,
    include: path.join(paths.appNodeModules, 'dwt'),
    loader: 'script-loader'
},

Writing code

Create WebTwain.js and WebTwain.css under src folder.

Define WebTwain component:

import React, { Component }from 'react';

export class WebTwain extends Component {

}

Add a button and div element:

render() {

    return (

      <div>

        <button onClick={this.handleClick}>Scan Document</button>

        <div id="dwtcontrolContainer"></div>

      </div>

    );

  }

To display the container at the center, add CSS code to WebTwain.css:

#dwtcontrolContainer > div {

    margin: 0 auto;

}

Import the CSS code to WebTwain.js:

import './WebTwain.css';

Next, create a button click event. Create function handleClick():

handleClick() {

    Dynamsoft.WebTwainEnv.ProductKey="BB5378854D6D60CF72FD5D6EB92FB925A9204E14C7E80A7E504E707255412B0E90042463C14F5EB3BF4060D7ABE5ED65F60419A097E8B9DF29DE644BB84E68AC6720F03518D5B8AE794DE04BB0E22FB5ABB2982DDA0E2D9CB0236A286977A11762C537F9CBC6F4F707C60E92";

    var dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');

    var bSelected = dwObject.SelectSource();

    if (bSelected) {

      var onAcquireImageSuccess = function() { dwObject.CloseSource(); };

      var onAcquireImageFailure = onAcquireImageSuccess;

      dwObject.OpenSource();

      dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);

    }

  }

If you have a valid license, set it first. By default, there is a trial license used by the library.

Bind the function in the constructor:

constructor(props) {

    super(props);

    this.handleClick = this.handleClick.bind(this);

}

Add WebTwain component to App.js:

import {WebTwain} from './WebTwain';

class App extends Component {

  render() {

    return (

      <div className="App">

        <div className="App-header">

          <img src={

      logo} className="App-logo" alt="logo" />

          <h2>Dynamic Web TWAIN with React</h2>

        </div>

        <WebTwain/>

      </div>

    );

  }

}

Now if you compile the code, you will see the error:

The reason is ‘Dynamsoft’ is the global declaration, which is not declared in our code. To pass ESLint check, add a /*global …*/ comment:

/*global Dynamsoft*/

Build and run the app:

npm start

Open http://localhost:3000/ in Chrome:

Source Code

https://github.com/dynamsoft-dwt/react