A react hook for detecting barcode scanner input.
npm install use-scan-detection-react18A react hook for detecting barcode scanners in the DOM.
``
npm i use-scan-detection
`
useScanDetection({
onComplete: (code) => { console.log(code) }
});
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. |1
| 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 . |false
| 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 . |document
| container | DOM element to listen for keydown events in. Defaults to .
js
import React, { useState } from 'react';
import useScanDetection from 'use-scan-detection';const Input = () => {
const [value, setValue] = useState("");
useScanDetection({
onComplete: setValue,
minLength: 13 // EAN13
});
return (
value={value}
type="text"
/>
);
};
export default Input
``