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.

React web document scanning

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:

React eslint 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:

Dynamic Web TWAIN with React

Source Code

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

Search Blog Posts