CODEWITHSUNDEEP
javascriptjqueryreactjsbarcode-scanner
jeffdh5
jeffdh5

Reputation: 75

React.JS: Detect if keyboard input is from a barcode scanner

I am working on a problem where we need to detect if a user used a barcode scanner to scan something into an input box, or they just typed in values using a regular keyboard. Based on each scenario, we want to have different callbacks that handle the user input.

I am porting over a codebase that previously leveraged jQuery detect barcodes using this library: https://github.com/escaleno-ltda/jQuery-Scanner-Detection.

I am now re-writing this code in React.JS but I am stuck here as there are no available libraries on React.JS for this.

Is it possible to import that code inside my React.JS (create-react-app) project? I did yarn install jQuery-Scanner-Detection and tried to import it, but I get this issue: ReferenceError: jQuery is not defined (This is in the dependency file, not my project. I figured it would not be easy to modify a dependency.)

Another way: Is it possible to implement the logic natively in React.JS? It basically detects the speed of user input to the keyboard, and if it is fast enough then we consider it a barcode scan. Otherwise we consider it a regular keystroke.

Upvotes: 1

Views: 3350

Answers (1)

kͩeͣmͮpͥ ͩ
kͩeͣmͮpͥ ͩ

Reputation: 7846

Looking at that library, it tries to check for three things

  • (optional) A specific keycode that the scanner emmits when the button is pressed
  • (optional) A character keycode that the scanner emits at the end of a barcode
  • The timing between characters

Given that, with React, you have can subscribe to DOM events and implement the same logic, the answer to the second question is, yes, you can create a React component.

Upvotes: 1

Related Questions