@alzera/react-qr-scanner v1.0.4

React QR Scanner

@alzera/react-qr-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.

Features

• Lightweight: Keep your web application nimble with a minimalistic QR code scanning solution.
• Simplicity: Easy-to-use API designed for developers of all skill levels.
• Legacy: Support image input as camera fallback.
• Customizable: Tailor the scanner's appearance to suit your application's needs.

Installation

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

npm install @alzera/react-qr-scanner

Components

QRScanner

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.

Basic Example

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

const MyQRScannerComponent = () => {
  const [scannedData, setScannedData] = useState('');

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

export default MyQRScannerComponent;

Props

Scanner

Simple component wrapper for barcode-detector library.

Basic Example

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

const MyScannerComponent = () => {
  const [scannedData, setScannedData] = useState('');

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

export default MyScannerComponent;

Props

DropZone

Simple component wrapper for barcode-detector library.

Basic Example

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

const MyDropZoneComponent = () => {
  const [scannedData, setScannedData] = useState('');

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

export default MyDropZoneComponent;

Props

Contributing

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

Happy scanning! 📷 🚀