Skip to content

Commit 9ff835e

Browse files
Cube-JCube-J
committed
update react-hooks sample; update readme;
1 parent d06c3f2 commit 9ff835e

7 files changed

Lines changed: 86 additions & 98 deletions

File tree

‎1.hello-world/13.read-video-react-hooks/README.md‎

Lines changed: 38 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -53,57 +53,51 @@ BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javas
5353

5454
```tsx
5555
import { BarcodeScanner, TextResult } from "dynamsoft-javascript-barcode";
56-
import React, { useState, useEffect, useRef } from "react";
56+
import React, { useEffect, useRef } from "react";
5757
import "./VideoDecode.css";
5858

5959
function VideoDecode() {
60-
let [pScanner, setPScanner] = useState(null as null | Promise<BarcodeScanner>);
61-
const elRef = useRef(null as any);
60+
const pScanner = useRef(null as null | Promise<BarcodeScanner>);
61+
const elRef = useRef<HTMLDivElement>(null);
6262

6363
useEffect(() => {
64-
setPScanner((pScanner = BarcodeScanner.createInstance()));
64+
(async () => {
65+
try {
66+
const scanner = (await (pScanner.current = BarcodeScanner.createInstance()));
67+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
68+
if (scanner.isContextDestroyed()) return;
69+
await scanner.setUIElement(elRef.current!);
70+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
71+
if (scanner.isContextDestroyed()) return;
72+
scanner.onFrameRead = (results: TextResult[]) => {
73+
for (let result of results) {
74+
console.log(result.barcodeText);
75+
}
76+
};
77+
scanner.onUniqueRead = (txt: string, result: TextResult) => {
78+
alert(txt);
79+
};
80+
await scanner.open();
81+
} catch (ex: any) {
82+
if (ex.message.indexOf("network connection error")) {
83+
let customMsg =
84+
"Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
85+
console.log(customMsg);
86+
alert(customMsg);
87+
}
88+
throw ex;
89+
}
90+
})();
6591
return () => {
6692
(async () => {
67-
if (pScanner) {
68-
(await pScanner).destroyContext();
93+
if (pScanner.current) {
94+
(await pScanner.current).destroyContext();
6995
console.log("BarcodeScanner Component Unmount");
7096
}
7197
})();
7298
};
7399
}, []);
74100

75-
useEffect(() => {
76-
if (elRef.current) {
77-
(async () => {
78-
try {
79-
const scanner = (await pScanner)!;
80-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
81-
if (scanner.isContextDestroyed()) return;
82-
await scanner.setUIElement(elRef.current!);
83-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
84-
if (scanner.isContextDestroyed()) return;
85-
scanner.onFrameRead = (results: TextResult[]) => {
86-
for (let result of results) {
87-
console.log(result.barcodeText);
88-
}
89-
};
90-
scanner.onUniqueRead = (txt: string, result: TextResult) => {
91-
alert(txt);
92-
};
93-
await scanner.open();
94-
} catch (ex: any) {
95-
if (ex.message.indexOf("network connection error")) {
96-
let customMsg =
97-
"Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
98-
console.log(customMsg);
99-
alert(customMsg);
100-
}
101-
throw ex;
102-
}
103-
})();
104-
}
105-
}, [!!elRef.current]);
106-
107101
return (
108102
<div ref={elRef} className="component-barcode-scanner">
109103
<svg className="dce-bg-loading" viewBox="0 0 1792 1792">
@@ -186,16 +180,16 @@ export default VideoDecode;
186180
* In `ImgDecode.tsx`, add code for initializing and destroying the `BarcodeReader` instance.
187181

188182
```tsx
189-
import React, { useState, useEffect } from "react";
183+
import React, { useRef, useEffect } from "react";
190184
import { BarcodeReader } from "dynamsoft-javascript-barcode";
191185
import "./ImgDecode.css";
192186

193187
function ImgDecode() {
194-
let [pReader, setPReader] = useState(null as null | Promise<BarcodeReader>);
188+
const pReader = useRef(null as null | Promise<BarcodeReader>);
195189

196190
const decodeImg = async (e: React.ChangeEvent<HTMLInputElement>) => {
197191
try {
198-
const reader = (await pReader)!;
192+
const reader = (await pReader.current)!;
199193
let results = await reader.decode(e.target.files![0]);
200194
for (let result of results) {
201195
alert(result.barcodeText);
@@ -216,11 +210,11 @@ function ImgDecode() {
216210
};
217211

218212
useEffect(() => {
219-
setPReader((pReader = BarcodeReader.createInstance()));
213+
pReader.current = BarcodeReader.createInstance();
220214
return () => {
221215
(async () => {
222-
if (pReader) {
223-
(await pReader).destroyContext();
216+
if (pReader.current) {
217+
(await pReader.current).destroyContext();
224218
console.log("ImgDecode Component Unmount");
225219
}
226220
})();

‎1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React, { useState, useEffect } from "react";
1+
import React, { useRef, useEffect } from "react";
22
import { BarcodeReader } from "dynamsoft-javascript-barcode";
33
import "./ImgDecode.css";
44

55
function ImgDecode() {
6-
let [pReader, setPReader] = useState(null as null | Promise<BarcodeReader>);
6+
const pReader = useRef(null as null | Promise<BarcodeReader>);
77

88
const decodeImg = async (e: React.ChangeEvent<HTMLInputElement>) => {
99
try {
10-
const reader = (await pReader)!;
10+
const reader = (await pReader.current)!;
1111
let results = await reader.decode(e.target.files![0]);
1212
for (let result of results) {
1313
alert(result.barcodeText);
@@ -28,11 +28,11 @@ function ImgDecode() {
2828
};
2929

3030
useEffect(() => {
31-
setPReader((pReader = BarcodeReader.createInstance()));
31+
pReader.current = BarcodeReader.createInstance();
3232
return () => {
3333
(async () => {
34-
if (pReader) {
35-
(await pReader).destroyContext();
34+
if (pReader.current) {
35+
(await pReader.current).destroyContext();
3636
console.log("ImgDecode Component Unmount");
3737
}
3838
})();
@@ -46,4 +46,4 @@ function ImgDecode() {
4646
);
4747
}
4848

49-
export default ImgDecode;
49+
export default ImgDecode;

‎1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx‎

Lines changed: 33 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,49 @@
11
import { BarcodeScanner, TextResult } from "dynamsoft-javascript-barcode";
2-
import React, { useState, useEffect, useRef } from "react";
2+
import React, { useEffect, useRef } from "react";
33
import "./VideoDecode.css";
44

55
function VideoDecode() {
6-
let [pScanner, setPScanner] = useState(null as null | Promise<BarcodeScanner>);
7-
const elRef = useRef(null as any);
6+
const pScanner = useRef(null as null | Promise<BarcodeScanner>);
7+
const elRef = useRef<HTMLDivElement>(null);
88

99
useEffect(() => {
10-
setPScanner((pScanner = BarcodeScanner.createInstance()));
10+
(async () => {
11+
try {
12+
const scanner = (await (pScanner.current = BarcodeScanner.createInstance()));
13+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
14+
if (scanner.isContextDestroyed()) return;
15+
await scanner.setUIElement(elRef.current!);
16+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
17+
if (scanner.isContextDestroyed()) return;
18+
scanner.onFrameRead = (results: TextResult[]) => {
19+
for (let result of results) {
20+
console.log(result.barcodeText);
21+
}
22+
};
23+
scanner.onUniqueRead = (txt: string, result: TextResult) => {
24+
alert(txt);
25+
};
26+
await scanner.open();
27+
} catch (ex: any) {
28+
if (ex.message.indexOf("network connection error")) {
29+
let customMsg =
30+
"Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
31+
console.log(customMsg);
32+
alert(customMsg);
33+
}
34+
throw ex;
35+
}
36+
})();
1137
return () => {
1238
(async () => {
13-
if (pScanner) {
14-
(await pScanner).destroyContext();
39+
if (pScanner.current) {
40+
(await pScanner.current).destroyContext();
1541
console.log("BarcodeScanner Component Unmount");
1642
}
1743
})();
1844
};
1945
}, []);
2046

21-
useEffect(() => {
22-
if (elRef.current) {
23-
(async () => {
24-
try {
25-
const scanner = (await pScanner)!;
26-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
27-
if (scanner.isContextDestroyed()) return;
28-
await scanner.setUIElement(elRef.current!);
29-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
30-
if (scanner.isContextDestroyed()) return;
31-
scanner.onFrameRead = (results: TextResult[]) => {
32-
for (let result of results) {
33-
console.log(result.barcodeText);
34-
}
35-
};
36-
scanner.onUniqueRead = (txt: string, result: TextResult) => {
37-
alert(txt);
38-
};
39-
await scanner.open();
40-
} catch (ex: any) {
41-
if (ex.message.indexOf("network connection error")) {
42-
let customMsg =
43-
"Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
44-
console.log(customMsg);
45-
alert(customMsg);
46-
}
47-
throw ex;
48-
}
49-
})();
50-
}
51-
}, [!!elRef.current]);
52-
5347
return (
5448
<div ref={elRef} className="component-barcode-scanner">
5549
<svg className="dce-bg-loading" viewBox="0 0 1792 1792">
@@ -94,4 +88,4 @@ function VideoDecode() {
9488
);
9589
}
9690

97-
export default VideoDecode;
91+
export default VideoDecode;

‎1.hello-world/4.read-video-react/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ class VideoDecode extends React.Component {
6262
async componentDidMount() {
6363
try {
6464
const scanner = await (this.pScanner = BarcodeScanner.createInstance());
65-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
65+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
6666
if(scanner.isContextDestroyed()) return;
6767
await scanner.setUIElement(this.elRef.current!);
68-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
68+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
6969
if(scanner.isContextDestroyed()) return;
7070
scanner.onFrameRead = results => {
7171
for (let result of results) {

‎1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ class VideoDecode extends React.Component {
88
async componentDidMount() {
99
try {
1010
const scanner = await (this.pScanner = BarcodeScanner.createInstance());
11-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
11+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
1212
if(scanner.isContextDestroyed()) return;
1313
await scanner.setUIElement(this.elRef.current!);
14-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
14+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
1515
if(scanner.isContextDestroyed()) return;
1616
scanner.onFrameRead = results => {
1717
for (let result of results) {

‎1.hello-world/7.read-video-nextjs/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,10 @@ class VideoDecode extends React.Component {
5858
async componentDidMount() {
5959
try {
6060
const scanner = await (this.pScanner = BarcodeScanner.createInstance());
61-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
61+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
6262
if(scanner.isContextDestroyed()) return;
6363
await scanner.setUIElement(this.elRef.current!);
64-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
64+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
6565
if(scanner.isContextDestroyed()) return;
6666
scanner.onFrameRead = results => {
6767
for (let result of results) {

‎1.hello-world/7.read-video-nextjs/components/VideoDecode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ class VideoDecode extends React.Component {
77
async componentDidMount() {
88
try {
99
const scanner = await (this.pScanner = BarcodeScanner.createInstance());
10-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
10+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
1111
if(scanner.isContextDestroyed()) return;
1212
await scanner.setUIElement(this.elRef.current!);
13-
// Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'.
13+
// Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode.
1414
if(scanner.isContextDestroyed()) return;
1515
scanner.onFrameRead = results => {
1616
for (let result of results) {

0 commit comments

Comments
 (0)