Dev Center
Table of contents

Thanks for Downloading Dynamic Web TWAIN 30-Day Trial!

Your download will start shortly. If your download does not begin, click here to retry.

Use Web TWAIN in 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.


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"

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


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) {
    DWObject = null;
    containerId = 'dwtcontrolContainer';
    componentDidMount() {
        Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => {
        Dynamsoft.DWT.ProductKey = 'YOUR-PRODUCT-KEY';
        Dynamsoft.DWT.ResourcesPath = "/dwt-resources";
        Dynamsoft.DWT.Containers = [{
            WebTwainId: 'dwtObject',
            ContainerId: this.containerId,
            Width: '300px',
            Height: '400px'
    Dynamsoft_OnReady() {
        this.DWObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
    acquireImage() {
        if (this.DWObject) {
            .then(() => {
                return this.DWObject.AcquireImageAsync({
                    IfCloseSourceAfterAcquire: true,
            .catch((exp) => {
    render() {
        return (<>
            <button onClick = {() => this.acquireImage()} > Scan </button> 
            <div id = {this.containerId}> </div> 


  • 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

Note: 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 sample project:

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest Version (18.4)
    • Version 18.3
    • Version 18.1
    • Version 18.0
    • Version 17.3
    • Version 17.2.1
    • Version 17.1.1
    • Version 17.0
    • Version 16.2
    • Version 16.1.1
    Change +