Socket
Socket
Sign inDemoInstall

@use-symbology-scanner/react

Package Overview
Dependencies
Maintainers
0
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@use-symbology-scanner/react

React hook for detecting barcode scanner input in the browser.


Version published
Weekly downloads
596
decreased by-6.58%
Maintainers
0
Weekly downloads
 
Created
Source

@use-symbology-scanner

Table of contents

Introduction

This package provides a simple way to listen for scanner input in the browser. It works by listening for keydown events and matching the input against a set of symbologies.

Installation

This package comes in two flavours; react and vanilla. The react package is a wrapper around the vanilla package that provides a React hook for listening to scanner input.

Vanilla

npm install @use-symbology-scanner/vanilla
yarn add @use-symbology-scanner/vanilla
pnpm add @use-symbology-scanner/vanilla

React

npm install @use-symbology-scanner/react
yarn add @use-symbology-scanner/react
pnpm add @use-symbology-scanner/react

Usage

React
import { useSymbologyScanner } from '@use-symbology-scanner/react';

export const App = () => {
    const ref = useRef(null)

    const handleSymbol = (symbol, matchedSymbologies) => {
        console.log(`Scanned ${symbol}`)
    }

    useSymbologyScanner(handleSymbol, { target: ref })

    return (
        <div ref={ref}>
        </div>
    )
}

Vanilla
<!-- index.html -->
<div id="el"></div>
// script.js
const el = document.getElementById('id')

const handleSymbol = (symbol, matchedSymbologies) => {
    console.log(`Scanned ${symbol}`)
}

const scanner = new SymbologyScanner(handleSymbol, {}, el)

scanner.destroy() // clean up listeners

Options

PropertyTypeDescriptionDefault Value
targetEventTargetDOM element to listen for keydown events in.window.document
symbologiesArray<Symbology, StandardSymbologyKey>Symbologies to match against.STANDARD_SYMBOLOGIES
enabledbooleanWhether or not the scanner is enabled.true
eventOptionsobjectOptions to pass to the addEventListener call.{ capture: false, passive: true }
preventDefaultbooleanWhether or not to call preventDefault on the event.false
ignoreRepeatsbooleanWhether or not to ignore repeated keydown events.true
scannerOptionsobjectOptions that describe the behaviour of the hardware scanner.{ prefix: '', suffix: '', maxDelay: 20 }

Symbologies

A Symbology is a defined method of representing numeric or alphabetic digits using bars and spaces that are easily scanned by computer systems. By default, all of the standard symbologies in the table below are matched against the input.

Standard Symbologies

SymbologyAllowed CharactersMin LengthMax Length
UPC-A0-91212
UPC-E0-966
EAN-80-988
EAN 130-91313
Codabar0-9, -, ., $, :, /, +4
Code 110-9, -4
Code 390-9, A-Z, , $, %, *, +, -, ., /1
Code 930-9, A-Z, , $, %, +, -, .1
Code 1280-9, A-Z, , $, %, *, +, -, ., /1
Code 25 Interleaved0-91
Code 25 Industrial0-91
MSI Code0-91
QR Code0-9, A-Z, , $, %, *, +, -, ., /, :1
PDF4170-9, A-Z, , $, %, *, +, -, ., /, :1
Data Matrix0-9, A-Z, , $, %, *, +, -, ., /, :1
Aztec0-9, A-Z, , $, %, *, +, -, ., /, :1
Dot Code0-9, A-Z, , $, %, *, +, -, ., /, :1

In order to only match against a subset of the standard symbologies, you can pass in an array of symbologies to the symbologies option:

import { STANDARD_SYMBOLOGY_KEYS } from '@use-symbology-scanner/core';

const symbologies = [
    STANDARD_SYMBOLOGY_KEYS['EAN-8'],
    STANDARD_SYMBOLOGY_KEYS['EAN-13'],
]

Missing a common symbology or an issue with one of the standard symbologies? Feel free to open an issue or a pull request. Alternatively, you can define your own custom symbologies.

Custom Symbologies

You can also define your own custom symbologies to match against the input.

PropertyTypeDescription
namestringName of the symbology.
allowedCharactersRegExpAllowed characters in the symbology.
minLengthnumberMinimum length of the symbology.
maxLengthnumberMaximum length of the symbology.

allowedCharacters must only contain a character class. For example, [0-9] is valid, but 0-9 is not. You can define a custom symbology like so:

import { Symbology } from '@use-symbology-scanner/core';

const customSymbology = new Symbology({
    name: 'Custom Symbology',
    allowedCharacters: '[0-9]',
    minLength: 1,
    maxLength: 10
})

Supported hardware

This library has not yet been tested on any hardware. If you have a scanner that you would like to test this library with, please open an issue or a pull request. Generally, this library should work with any hardware that emits keydown events. You can tweak the scannerOptions to match the behaviour of your hardware. For example, if your scanner emits a newline character after each scan, you can configure the scannerOptions like so:

const scannerOptions = {
    prefix: '',
    suffix: '\n',
    maxDelay: 20
}

Bluetooth scanners may require a longer maxDelay value due to latency. If you are using a bluetooth scanner, try increasing the maxDelay value to 100 or 200.

Contributing

Development

git clone
cd @use-symbology-scanner/core
yarn install
yarn build

Testing

yarn test

License

MIT

Keywords

FAQs

Package last updated on 20 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc