Skip to content

yudielcurbelo/react-qr-scanner

Repository files navigation

Features

  • Scan codes using a smartphone camera or webcam.

Demo

Checkout the Demo.

Install

yarn add @yudiel/react-qr-scanner

npm install @yudiel/react-qr-scanner

Usage

import { Scanner } from '@yudiel/react-qr-scanner';

const App = () => {
    return <Scanner onScan={(result) => console.log(result)} />;
};
  • There is also a hook to get the available devices useDevices.

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
onScan (detectedCodes: IDetectedBarcode[]) => void Yes Callback function that is called when one or more barcodes are 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.

Limitations

  • Due to browser implementations, the camera can only be accessed over https or localhost.
  • Beep sound in iOS will only work after user interaction.
  • Server-side rendering won't work, so only require the component when rendering in a browser environment.

Types

BarcodeFormat

'aztec' |
    'code_128' |
    'code_39' |
    'code_93' |
    'codabar' |
    'databar' |
    'databar_expanded' |
    'data_matrix' |
    'dx_film_edge' |
    'ean_13' |
    'ean_8' |
    'itf' |
    'maxi_code' |
    'micro_qr_code' |
    'pdf417' |
    'qr_code' |
    'rm_qr_code' |
    'upc_a' |
    'upc_e' |
    'linear_codes' |
    'matrix_codes' |
    'unknown';

IDetectedBarcode

export interface IDetectedBarcode {
    boundingBox: IBoundingBox;
    cornerPoints: IPoint[];
    format: string;
    rawValue: string;
}

IScannerComponents

export interface IScannerComponents {
    tracker?: TrackFunction;
    audio?: boolean;
    onOff?: boolean;
    torch?: boolean;
    zoom?: boolean;
    finder?: boolean;
}

IScannerStyles

export interface IScannerStyles {
    container?: CSSProperties;
    video?: CSSProperties;
    finderBorder?: number;
}