Thanks for downloading Dynamsoft Barcode Reader Package!
Your download will start shortly. If your download does not begin, click here to retry.
JavaScript Hello World Sample - React 
React is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called “the library”) into a React application.
Official Sample
Preparation
Make sure you have node and yarn installed. node 16.14.2
and yarn 1.22.10
are used in the example below.
Create the sample project
Create a Bootstrapped Raw React Application
npx create-react-app read-video-react
CD to the root directory of the application and install the dependencies
yarn add dynamsoft-javascript-barcode
Start to implement
Add a file “dbr.js” under “/src/” to configure the library
import { BarcodeReader } from 'dynamsoft-javascript-barcode';
BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/";
Note:
license
specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days.engineResourcePath
tells the library where to get the necessary resources at runtime.
Create a directory “components” under “/src/” and create the following files inside it to represent two components
- BarcodeScannerComponent.js
- HelloWorld.css
- HelloWorld.js
Edit the BarcodeScanner component
- In
BarcodeScannerComponent.js
, add code for initializing the library.
import "../dbr";
import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
import React from 'react';
class BarcodeScannerComponent extends React.Component {
constructor(props) {
super(props);
this.pScanner = null;
this.elRef = React.createRef();
}
async componentDidMount() {
try {
if (this.pScanner == null)
this.pScanner = BarcodeScanner.createInstance();
const scanner = await this.pScanner;
this.elRef.current.appendChild(scanner.getUIElement());
this.elRef.current.style.width = "100%";
this.elRef.current.style.height = "100%";
await scanner.open();
} catch (ex) {
console.error(ex);
}
}
shouldComponentUpdate() {
// Never update UI after mount, dbrjs sdk use native way to bind event, update will remove it.
return false;
}
render() {
return (
<div ref={this.elRef}>
</div>
);
}
}
export default BarcodeScannerComponent;
Note:
The html code in
render()
and the following code builds the UI for the library.this.elRef.current.appendChild(scanner.getUIElement());
The component should never update (check the code for
shouldComponentUpdate()
) so that events bound to the UI stay valid.
Edit the HelloWorld component
- Add BarcodeScannerComponent in
HelloWorld.js
import './HelloWorld.css';
import React from 'react';
import BarcodeScannerComponent from './BarcodeScannerComponent';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div id="UIElement">
<BarcodeScannerComponent></BarcodeScannerComponent>
</div>
);
}
}
export default HelloWorld;
- Define the style of the element in
HelloWorld.css
#UIElement {
margin: 2vmin auto;
text-align: center;
font-size: medium;
height: 40vh;
width: 80vw;
}
Add the HelloWorld component to App.js
Edit the file App.js
to be like this
import './App.css';
import HelloWorld from './components/HelloWorld.js';
function App() {
return (
<div className="App">
<HelloWorld></HelloWorld>
</div>
);
}
export default App;
- Try running the project.
yarn start
If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. However, the found barcodes are not displayed anywhere yet. At the same time, there is a short delay for the initialization of the library during which nothing happens and is not user-friendly. The following takes care of these two issues.
Update HelloWorld.js
- Add state values
constructor(props) {
super(props);
this.state = {
libLoaded: false,
resultValue: "",
bShowScanner: false
};
}
- Add a few functions
import "../dbr";
import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
async componentDidMount() {
try {
//Load the library on page load to speed things up.
await BarcodeScanner.loadWasm();
this.setState(state => {
state.libLoaded = true;
return state;
}, () => {
this.showScanner();
});
} catch (ex) {
alert(ex.message);
throw ex;
}
}
showScanner = () => {
this.setState({
bShowScanner: true
});
}
appendMessage = (message) => {
switch (message.type) {
case "result":
this.setState(prevState => {
prevState.resultValue = message.format + ": " + message.text;
return prevState;
});
break;
case "error":
this.setState(prevState => {
prevState.resultValue = message.msg;
return prevState;
});
break;
default: break;
}
}
NOTE :
- The method
loadWasm()
in the functioncomponentDidMount()
initializes the library in the background. The scanner UI is only shown when the initialization finishes.- The method
appendMessage()
is used to show the result text on the page.
- Change the UI
render() {
return (
<div className="helloWorld">
<div id="UIElement">
{!this.state.libLoaded ? (<span>Loading Library...</span>) : ""}
{this.state.bShowScanner ? (<BarcodeScannerComponent appendMessage={this.appendMessage}></BarcodeScannerComponent>) : ""}
</div>
<input type="text" value={this.state.resultValue} readOnly={true} id="resultText" />
</div>
);
}
- Add style for the “input” element in
HelloWorld.css
#resultText {
display: block;
margin: 0 auto;
padding: 0.4rem 0.8rem;
color: inherit;
width: 80vw;
border: none;
font-size: 1rem;
border-radius: 0.2rem;
text-align: center;
}
- In
BarcodeScannerComponent.js
, use the eventonFrameRead
and the parent methodappendMessage()
to return the results.
async componentDidMount() {
try {
if (this.pScanner == null)
this.pScanner = BarcodeScanner.createInstance();
const scanner = await this.pScanner;
this.elRef.current.appendChild(scanner.getUIElement());
this.elRef.current.style.width = "100%";
this.elRef.current.style.height = "100%";
scanner.onFrameRead = results => {
for (let result of results) {
const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2;
this.props.appendMessage({ format, text: result.barcodeText, type: "result" });
if (result.barcodeText.indexOf("Attention(exceptionCode") !== -1) {
this.props.appendMessage({ msg: result.exception.message, type: "error" });
}
}
};
await scanner.open();
} catch (ex) {
this.props.appendMessage({ msg: ex.message, type: "error" });
console.error(ex);
}
}
NOTE :
- The event
onFrameRead
is triggered upon reading of each frame. If barcodes are found on that frame, the results will be returned and shown on the page.
After the above changes, the application is made more user-friendly and the barcode text is displayed on the page right away. You can start implementing your own business workflow and make the application useful.