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\ when running “npm start”.

Install script-loader for loading global JavaScript library:

npm install script-loader --save

Add the rule to

    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 (
        <button onClick={this.handleClick}>Scan Document</button>
        <div id="dwtcontrolContainer"></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() {

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

    var bSelected = dwObject.SelectSource();

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

      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) {
    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>

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

Search Blog Posts