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: