react-usb-barcode-scanner
If you have a barcode scanner and need to integrate it into a react application.
Demo
Application demo https://sinyawskiy.github.io/react-usb-barcode-scanner/ In the console, you can see the custom processing of the barcode in the middleware.
Principle of operation
A handler is hung on the document keyup event. It looks if the characters are typed quickly enough, stores them in memory, after the end of fast input, it will dispatch the event with the saved text.
Default export from module
export {
barcodeScannerMiddleware,
barcodeScannerReducer,
BARCODE_SCANNED,
BARCODE_SCANNING,
BarcodeScanner,
enableBarcodeScanner,
disableBarcodeScanner,
setHistoryInfo,
}
Required to use
Register in reducers.js
import { barcodeScannerReducer } from 'react-usb-barcode-scanner';
export default {
...,
barcodeScanner: barcodeScannerReducer,
}
Register in middleware.js
import { applyMiddleware } from 'redux';
import { barcodeScannerMiddleware } from 'BarcodeScanner';
...
applyMiddleware([..., barcodeScannerMiddleware]) // <= default middleware
In real application you need write yours middleware look like this:
import {BARCODE_SCANNED, BARCODE_SCANNING} from 'react-usb-barcode-scanner';
const barcodeScannerMiddleware = (store) => (next) => (action) => {
// processing barcode need to be here
if(action.type === BARCODE_SCANNED){
const barcode = action.payload.data;
store.dispatch(YourActionOnScanned(barcode));
}
if(action.type === BARCODE_SCANNING){
store.dispatch(YourActionOnScanning());
}
return next(action);
};
Add to App.js
import {BarcodeScanner} from 'react-usb-barcode-scanner';
...
<root>
...
<BarcodeScanner config={{
intervalBetweenKeyPress: 100
scanningEndTimeout: 200
debug: true,
ignoreOnInput: false,
historyLength: 0,
}}/>
...
</Root>
All processing takes place in the middleware, the necessary events are dispatched there and barcodes are processed.
Example
See an example in the example folder :)
TODO: On hooks, it has not yet been possible to implement the storage of an object of type timeout.
Configuration example
Configuration config.js
export default {
intervalBetweenKeyPress: 100 // if between presses is less than 100ms (scanner has about 25ms),
scanningEndTimeout: 200, // clicks have stopped waiting for 200ms, then the input has stopped
debug: true,
historyLength: 5,
}
An optional config attribute is passed to the component:
import config from './config';
<BarcodeScanner config={config} />
Using history
It is necessary to set the historyLength parameter in the config file, the number of records in the history, the latest is the newest.
The whole history is stored in the barcode of the scanner in the history array. As an object, a date in ISO 8601 format, and the data string that was scanned.
To add to the history, for example, a username or an id, use the action setHistoryDict , which in payload accepts dict which is then undistracted into history when it is scanned.