react-qr-scanner-with-custom-ui

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;
}