How to scan barcodes in your React.js application

• library

  9 2,308 2.8 TypeScript

  Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem. (by zxing-js)

  

The react-qr-barcode-scanner relies on zxing for decoding barcodes. I used it for some time until I discovered a bug caused by inconsistent results from reading EAN codes. I found an issue on zxing and it appeared to have been fixed. However the react-qr-barcode-scanner used an older version of zxing where this was still an issue.

• quagga2

  8 709 6.7 TypeScript

  An advanced barcode-scanner written in Javascript and TypeScript - Continuation from https://github.com/serratus/quaggajs

quokka2

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• quagga2-react-example

  1 59 5.7 JavaScript

  Showcasing Quagga2 in combination with ReactJS

This is another package that extends zxing. I found an example on how to use it with React but honestly it seemed daunting.

• html5-qrcode

  16 4,495 3.1 TypeScript

  A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org

html5-qrcode

• html5-qrcode-react

  3 79 0.0 JavaScript

  React example using html5-qrcode library

  

Yet another package extending zxing. The implementation was a bit easier to follow although this seemed to also use an old version of zxing, so I was a bit cautious about using it.

• react-qr-barcode-scanner

  1 68 0.0 TypeScript

  A simple React Component using the client's webcam to read barcodes.

I eventually forked the react-qr-barcode-scanner in an attempt to update its dependencies, but discovered that the implementation was quite straight-forward to begin with.

Suggest a related project