📸 GetSoftwareCo QR React

A modern, lightweight, and fully customizable QR & Barcode scanner for React.

Built on top of html5-qrcode, this library solves common issues like ugly default UIs, lack of flashlight support, and complex camera management. It provides a plug-and-play component with a beautiful interface and a headless hook for total control.

---

🚀 Features

• 🎨 Modern Custom UI: No more outdated default buttons. Comes with a sleek, rounded, and mobile-friendly interface.
• 🔦 Flashlight / Torch Support: Essential for logistics and dark environments (Supports toggle on/off).
• 🔄 Camera Switching: Easily switch between Front and Back cameras.
• 🛒 Multi-Format Support: Scans QR Codes, EAN-13, UPC, Code 128, and more.
• ⚛️ Headless Hook: Use useScanner to build your own UI from scratch.
• 🛡️ TypeScript Ready: Fully typed for a great developer experience.
• 📱 Responsive: Works perfectly on mobile and desktop devices.

---

📦 Installation

npm install @getsoftwareco/get-qr-react

or

yarn add @getsoftwareco/get-qr-react

Note: This package requires react and react-dom (v16.8+).

💻 Usage

1. Basic Usage (Plug & Play) The easiest way to add a scanner to your app.

import React from 'react';
import { GetQR } from '@getsoftwareco/get-qr-react';

const App = () => {
  return (
    <div style={{ padding: 20 }}>
      <h1>QR Scanner Demo</h1>
      
      <GetQR 
        onScanSuccess={(code, result) => {
          console.log("Scanned Code:", code);
          alert(`Scanned: ${code}`);
        }}
        onScanFailure={(error) => {
          // console.warn(error); // Optional
        }}
      />
    </div>
  );
};

export default App;

2. Advanced Usage (Barcodes & Flashlight) Perfect for inventory, logistics, or supermarket apps.

import React from 'react';
import { GetQR, Html5QrcodeSupportedFormats } from '@getsoftwareco/get-qr-react';

const InventoryScanner = () => {
  return (
    <GetQR 
      // Only scan specific barcodes to improve performance
      formatsToSupport={[
        Html5QrcodeSupportedFormats.QR_CODE,
        Html5QrcodeSupportedFormats.EAN_13, // Product Barcodes
        Html5QrcodeSupportedFormats.CODE_128, // Logistics
      ]}
      onScanSuccess={(code) => console.log("Product found:", code)}
      
      // Custom Styles
      containerStyle={{ width: '100%', maxWidth: '500px', borderRadius: 20 }}
      showControls={true} // Shows Play/Pause, Switch Camera, and Flashlight buttons
    />
  );
};

3. Headless Mode (Custom UI) 🛠️ Want to build your own interface? Use the useScanner hook.

import { useScanner } from '@getsoftwareco/get-qr-react';

const MyCustomScanner = () => {
  const { 
    startScan, 
    stopScan, 
    isScanning, 
    toggleTorch, 
    isTorchOn,
    activeCameraId 
  } = useScanner("my-custom-reader-id", (code) => console.log(code));

  return (
    <div>
      <div id="my-custom-reader-id" style={{ width: 300, height: 300 }} />
      
      <div className="controls">
        <button onClick={startScan} disabled={isScanning}>Start</button>
        <button onClick={stopScan} disabled={!isScanning}>Stop</button>
        <button onClick={toggleTorch}>
            {isTorchOn ? "Turn Off Light" : "Turn On Light 🔦"}
        </button>
      </div>
    </div>
  );
};

Scanner Component

⚙️ Props & Configuration

Prop	Type	Default	Description
onScanSuccess	function	Required	Callback when a code is successfully scanned.
onScanFailure	function	undefined	Callback when scanning fails (triggered on every frame).
startOnMount	boolean	true	Automatically start the camera when component mounts.
showControls	boolean	true	Show the built-in modern control panel (Start/Stop, Torch, Switch).
formatsToSupport	Array	All	Array of formats (QR, EAN, UPC...) to scan.
fps	number	10	Frames per second. Lower saves battery.
qrbox	number	250	Size of the scanning focus area (px).
disableFlip	boolean	false	Disable mirroring for front camera.
containerStyle	CSSProperties	{}	Style object for the main wrapper.

🏗️ Supported Formats

This package supports all major 1D and 2D code formats:

2D Formats

• QR Code
• Data Matrix
• Aztec
• PDF417

1D Formats

• EAN-13
• EAN-8
• UPC-A
• UPC-E
• Code 128
• Code 39
• Code 93
• ITF

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request or open an issue for bugs and feature requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License – see the LICENSE file for details.

---

Made with ❤️ by GETSoftware Co.