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