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