useScanDetection
A react hook for detecting barcode scanners in the DOM.
Installation
npm i use-scan-detection
Usage
useScanDetection({
onComplete: (code) => { console.log(code) }
});
Parameters
Parameters are supplied by a config object:
Parameter | Description |
---|---|
averageWaitTime | Average time between characters in milliseconds. Used to determine if input is from keyboard or a scanner. Defaults to 50 . |
timeToEvaluate | Time to evaluate the buffer after each character. |
startCharacter | Optional. Character that barcode scanner prefixes input with. Buffer only starts if this character is read first. |
endCharacter | Optional. Character that barcode scanner suffixes input with. Buffer is evaluated early if this character is read. Defaults to line return and escape. |
onComplete | Function that is called when a complete barcode is scanned. Function is called with a single string which is the complete code. |
onError | Optional. Function that is called when an incomplete barcode is scanned. Function is called with a single string which is the incomplete code. |
minLength | Minimum number of characters for a barcode to successfully read. Should be greater than 0. Defaults to 1 . |
ignoreIfFocusOn | Optional. DOM element that if focused prevents codes from being read. |
stopPropagation | Whether to call stopPropagation on each key event. Defaults to false . |
preventDefault | Whether to call preventDefault on each key event. Defaults to false . |
container | DOM element to listen for keydown events in. Defaults to document . |
Return
This hook returns nothing.
Example
;; const Input = { const value setValue = ; ; return <input value=value type="text" /> ;};
License
MIT Licensed