React-qr-scanner-with-square NPM

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

react qrcode qrcode-scan qrcode-reader qrcode-scanner qr-code-scan qr-code-reader qr-code-scanner

barcode-detector webrtc-adapter

2.0.8

6 months ago