Custom QR Scanner

This library extends the original QR scanning functionality from @yudiel/react-qr-scanner by enhancing user interactions and improving feedback through visual and click-based capabilities.

Features

• Scan QR and barcode formats using a smartphone camera or webcam.
• Visual bounding box states based on an external API response:
  • Red: Code not found.
  • Green: Code found.
  • Yellow: Loading state.
• Mouse-click interaction to detect bounding box clicks.
• Callback functions for:
  • onBoundingBoxClick: Detects clicks within the bounding box.
  • onNewBarCodeDetected: Triggers when a new barcode is scanned.
• Removed audio beep
• New overlay which shows bounding box with code
• Removed tracker and device options

Demo

To see the original library in action, check out Yudiel's Demo.

Install

npm install '@leelexuan/react-qr-scanner'

Run

npm run storybook

Supported Formats

| 1D Barcodes | 2D Barcodes | | ---------------- | ------------- | | Codabar | Aztec | | Code 39 | Data Matrix | | Code 93 | Matrix Codes | | Code 128 | Maxi Code | | Databar | Micro QR Code | | Databar Expanded | PDF 417 | | Dx Film Edge | QR Code | | EAN 8 | rMQR Code | | EAN 13 | | | ITF | | | Linear Codes | | | UPC A | | | UPC E | |

Scanner Props

| Prop | Type | Required | Description | | --------------- | --------------------------------------------- | -------- | -------------------------------------------------------------------------------- | | onBoundingBoxClick | (rawValue: string) => void | Yes | Callback function that is called when a bounding box is clicked. | | onNewBarcodeDetected | (rawValue: string) => void | Yes | Callback function that is called when a new barcode/qr code is detected. | | onError | (error: unknown) => void | No | Callback function that is called when an error occurs while mounting the camera. | | constraints | MediaTrackConstraints | No | Optional media track constraints to apply to the video stream. | | formats | BarcodeFormat[] | No | List of barcode formats to detect. | | paused | boolean | No | If true, scanning is paused. | | children | ReactNode | No | Optional children to render inside the scanner component. | | components | IScannerComponents | No | Custom components to use within the scanner. | | styles | IScannerStyles | No | Custom styles to apply to the scanner and its elements. | | classNames | IScannerClassNames | No | Custom classNames to apply to the scanner and its elements. | | allowMultiple | boolean | No | If true, ignore same barcode being scanned. | | scanDelay | number | No | Delay in milliseconds between scans. |