@alzera/react-scanner is a lightweight and simple-to-use React library for integrating QR code scanning functionality into your web applications. The primary goal of this library is to provide a hassle-free solution for developers who need a quick and efficient way to incorporate QR code scanning without the bloat.

• Barcode Formats: Support many different barcode formats, more on here.
• Legacy: Support image input as camera fallback.
• Low-level API: Expose low-level API to be able to create your own layout.
• Flash/Torch: Support handling torch when ever possible.

Install @alzera/react-scanner using your preferred package manager:

npm install @alzera/react-scanner

Combined version of Scanner component and DropZone component, comes with a built-in button that allows users to switch between the scanning mode and the drop zone mode.

import React, { useState } from 'react';
import { BarcodeScanner } from '@alzera/react-scanner';

export default function MyComponent(){
  const [scannedData, setScannedData] = useState('');

  return (
    <div style={{ maxWidth: '500px' }}>
      <BarcodeScanner onScan={(d) => d && setScannedData(d)} />
      {scannedData && <p>Scanned Data: {scannedData}</p>}
    </div>
  );
};

Simple component wrapper for barcode-detector library.

import React, { useState } from 'react';
import { Scanner } from '@alzera/react-scanner';

export default function MyComponent(){
  const [scannedData, setScannedData] = useState('');

  return (
    <div style={{ maxWidth: '500px' }}>
      <Scanner onScan={(d) => d && setScannedData(d)} />
      {scannedData && <p>Scanned Data: {scannedData}</p>}
    </div>
  );
};

Simple component wrapper for barcode-detector library.

import React, { useState } from 'react';
import { DropZone } from '@alzera/react-scanner';

export default function MyComponent(){
  const [scannedData, setScannedData] = useState('');

  return (
    <div style={{ maxWidth: '500px' }}>
      <DropZone onScan={(d) => d && setScannedData(d)} />
      {scannedData && <p>Scanned Data: {scannedData}</p>}
    </div>
  );
};

The useDecoder hook is designed to facilitate barcode detection, returning a ref to a decoder function that can be used to decode barcodes from images.

The useCamera hook is designed to facilitate easy to use camera.

We welcome contributions! Feel free to open issues, create pull requests, or provide feedback.

Happy scanning! 📷 🚀