use-scan-detection

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

import React, { useState } from 'react';
import useScanDetection from 'use-scan-detection';

const Input = () => {
    const [value, setValue] = useState("");

    useScanDetection({
        onComplete: setValue,
        minLength: 13 // EAN13
    });

    return (
        <input 
            value={value} 
            type="text"
        />
    );
};

export default Input

License

MIT Licensed